raduniformgrid image and text for each item

[Mar]

I am exploring RadUniformGrid in a WP7 application.  How can I change the demo code to show an image and its corresponding text instead of the rectangles that are added in the demo?

So, I guess if I have a class that contains an Image and Text Property, can I bind the collection of this class to a RadUniformGrid?
Also, is there an item clicked event for each of the cell?

Pratik

[Deyan]

Hi Pratik,

Thank you for your interest in RadControls for Windows Phone7.

To show elements containing image and text within the RadUniformGrid, you should create your own visual element according to the requirements and put it in the Children collection of the panel.

The RadUniformGrid is a layout panel that can be used to organize any type of items on the phone screen. It is not an items control which can be bound to a data source and hence you cannot bind it to a collection of items. In this direction, there is not a click event for the items within the layout panel.

If you, however, put Buttons in the RadUniformGrid, you will be able to use the Button.Click event to handle user interaction.

I suggest you take a look at the RadWrapPanel example where the WrapPanel is used as a layout panel of a ListBox control. In this case, you will be able to use the SelectionChanged events of the ListBox and thus be informed of when the user taps on the screen.

I hope this helps.

Do not hesitate to write back in case you have further questions.

Regards,
Deyan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mar]

Deyan,

Thanks for your reply and pointing me in the right direction.  I looked at the sample code for WrapPanel and should be able to use that for my application.
RadUniformGrid and RadWrapPanel look very similar. Can you please provide me more details about each and when to use which control?
Also, is there any documentation available for RadControls for WP7?

Pratik

[Mar]

Deyan,

One other thing, in the demo for WrapPanel, if you add 30 items instead of 15 in the code behind and try to perform the scrolling the page slides back to the top of the page.  How can I resolve it so that scrolling actually works?

Pratik

[Deyan]

Hello Pratik,

Thanks for writing back and for your further questions.

The RadUniformGrid panel is a layout panel that allows for ordering items in rows and columns. You can specify the amount of rows and columns by using the NumberOfRows and NumberOfColumns properties. The RadUniformGrid also implies that each row and each column will have the same height/width.

The RadWrapPanel, on the other side, layouts its children according to the available space and the Orientation setting. If the Orientation is set to be Horizontal the RadWrapPanel will begin the layout from left to right by ordering its children in rows. If the Orientation is defines as Vertical the layout panel will begin ordering the items from top to bottom and introducing new columns from left to right.

As you can see, both panels have some similarities but their concepts are different.

The scrolling in the example of the RadWrapPanel does not work since the ListBox control is put in a ScrollViewer itself and thus it is autosized. To enable the scrolling according to your requirements, you should change the XAML the following way:

<UserControl x:Class="Telerik.Examples.WP.WrapPanel.FirstLook"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
                <Setter Property="Background" Value="BlueViolet"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="Width" Value="80"/>
                <Setter Property="Height" Value="80"/>
                <Setter Property="Margin" Value="10"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
             </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="The ListBox below is using the WrapPanel as an items panel." TextWrapping="Wrap" Grid.Row="0"/>
        <!--<ScrollViewer Grid.Row="1">-->
            <ListBox Grid.Row="1" x:Name="ListBox1" ItemContainerStyle="{StaticResource ListBoxItemStyle}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <telerikPrimitives:RadWrapPanel />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        <!--</ScrollViewer>-->
    </Grid>
</UserControl>

As you can see, I have commented the ScrollViewer constructs and have set the Grid.Row attached property directly to the ListBox control.

I hope this helps.

Do not hesitate to get back to us in case of further questions.

Sincerely yours,
Deyan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mar]

Deyan,

That worked.  Thanks.

I am running into a different issue with DataBinding now.   Please see the code snippet below.

Inside the pivot control, I have a DataTemplate (TestItemTemplate) for the ItemTemplate. The DataContext for the page is set to {Binding RelativeSource={RelativeSource Self}} and the ItemsSource for PivotControl is bound to an observable collection.

Inside the DataTemplate of the pivotcontrol, I have a ListPicker which I want to bind to IEnumerable. I have created a public property of IEnumerable TestEntries = "One Two Three".Split();

The listpicker doesn't show any bound items though. If I place the listpicker outside the data template (as a sibling of the PivotControl, it shows the three strings in the picker)

  <phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="TestItemTemplate">
     <Grid Margin="0,-25,0,0">
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto" x:Name="AnotherContainer" />
          <RowDefinition Height="300" x:Name="TestDescriptionContainer" />
          <RowDefinition Height="Auto" x:Name="SaveCancelDeleteContainer" />
      </Grid.RowDefinitions>

            <toolkit:ListPicker x:Name="lstPicker" Grid.Row="0" ItemsSource="{Binding TestEntries}" Header="situation" FullModeHeader="SITUATIONS">
                <toolkit:ListPicker.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding}" Margin="4 0 0 0"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ListPicker.ItemTemplate>
                <toolkit:ListPicker.FullModeItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                            <TextBlock Text="{Binding}" Margin="4 0 0 0" FontSize="43" FontFamily="{StaticResource PhoneFontFamilyLight}"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ListPicker.FullModeItemTemplate>
            </toolkit:ListPicker>

<TextBox Grid.Row="1" Text="{Binding Description}" TextWrapping="Wrap" VerticalAlignment="Top" d:LayoutOverrides="Width" AcceptsReturn="True" Height="300"/>

      <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,2,0,0" >
          <Button x:Name="SaveButton" Content="Save" Margin="5" Click="SaveButton_Click" Width="140" />
          <Button x:Name="CancelButton" Content="Cancel" Margin="5" Click="CancelButton_Click" Width="140" />
          <Button x:Name="DeleteButton" Content="Delete" Margin="5" Click="DeleteButton_Click" Width="140" />
      </StackPanel>
     </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->

    <controls:Pivot
        x:Name="PivotControl"
        Title="{StaticResource AppName}"
        ItemsSource="{Binding TestEntries}"
        ItemTemplate="{StaticResource TestItemTemplate}"
        SelectionChanged="PivotControl_SelectionChanged"
        >
    </controls:Pivot>
</Grid>

[Valentin.Stoychev]

Hello Pratik,

Are you sure this property propagates correctly to the ListPicker? This would the first thing to check.

Sincerely yours,
Valentin.Stoychev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Vijay]

Hello Pratik,

  You have observed to find a good question. I appreciate it. Please find the below sample link which gives out complete scenario of Rad Uniform grid implementation on Phone Layout. This link also answers another part of your questions that is to find difference between Rad Uniform Grid, Wrap Panel and Dock Pane.

http://www.c-sharpcorner.com/UploadFile/54db21/telerik-raduniformgrid-in-windows-phone-7-via-wcf-service/ 

I hope this was useful!

Thanks and Regards,
Vijay
MVC Corp