Tile View Item Selection

3 posts, 0 answers
  1. Eduardo
    Eduardo avatar
    14 posts
    Member since:
    Jul 2011

    Posted 26 Aug 2011 Link to this post

    Hi everybody,

    I ask for a specific cuestion about RadTileView. I would like to display the tile items in "read-only" mode (IsEnable = false no valid xD). What I mean is that I present each item without the button for maximize/minimize. For that I took some piece of code I saw in one of your examples. It works properly but a problem raises when a tile item is selected because it is not highlighted. The code appears in the following snippet:

    <
    telerik:RadTileView Name="RadTileViewUsers"
                                                 ContentTemplate="{StaticResource ContentTemplate}"
                                                 ItemTemplate="{StaticResource ItemTemplate}"
                                                 MinimizedColumnWidth="150" MinimizedRowHeight="150"
                                                 RowHeight="120"
                                                 ColumnWidth="147"
                                                 MaximizeMode="Zero"
                                                 PreviewTileDragStarted="RadTileViewUsers_PreviewTileDragStarted"  
                                                 ItemContainerStyle="{StaticResource RadTileViewItemStyle}"
                                                 PreservePositionWhenMaximized="True" IsVirtualizing="True" IsSelectionEnabled="True" />

    And the style (ignoring the colors):

    <Style x:Key="RadTileViewItemStyle" TargetType="telerik:RadTileViewItem">
                <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="Background" Value="{StaticResource TileView_Background}" />
                <Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Padding" Value="7" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadTileViewItem">
                            <Grid>
                                <Border x:Name="outerBorder"
                                        Margin="{TemplateBinding Padding}"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}">
                                    <Border x:Name="outerContainer"
                                            Background="Transparent"
                                            BorderBrush="{StaticResource TileView_InneBorder}"
                                            BorderThickness="{StaticResource TileView_InneBorder_Thickness}"
                                            CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <StackPanel>
                                                <Border Background="{StaticResource TileView_HeaderBackground}"
                                                        BorderBrush="{StaticResource TileView_HeaderBorder}"
                                                        BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"
                                                        CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}"
                                                        Padding="10 0 7 0">
                                                    <Grid MinHeight="28">
                                                        <Border x:Name="GripBarElement" Background="Transparent">
                                                            <ContentPresenter x:Name="HeaderElement"
                                                                              Margin="0,0,10,0"
                                                                              HorizontalAlignment="Left"
                                                                              VerticalAlignment="Center"
                                                                              ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                                        </Border>
                                                        <!--  This is the default Minimize/Maximize button  -->
                                                        <!--
                                                            <telerik:RadToggleButton x:Name="MaximizeToggleButton"
                                                            Command="tileView:TileViewCommands.ToggleTileState"
                                                            Style="{StaticResource maximizeToggleStyle}" />
                                                        -->
                                                        <!--<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                                                            <telerik:RadButton >Refresh</telerik:RadButton>
                                                            <telerik:RadButton >Minimize</telerik:RadButton>
                                                            <telerik:RadButton >Maximize</telerik:RadButton>
                                                        </StackPanel>-->
                                                    </Grid>
                                                </Border>
                                                <Border x:Name="Splitter"
                                                        Height="4"
                                                        Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}"
                                                        BorderThickness="0"
                                                        OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}" />
                                            </StackPanel>
                                            <Grid Grid.Row="1" Background="Transparent">
                                                <ContentPresenter x:Name="ContentElement"
                                                                  Grid.Row="1"
                                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                                  Content="{TemplateBinding Content}"
                                                                  ContentTemplate="{TemplateBinding ContentTemplate}" />
                                            </Grid>
                                            <Rectangle x:Name="DisabledVisual"
                                                       Grid.RowSpan="2"
                                                       Fill="{StaticResource DisabledBrush}"
                                                       RadiusX="4"
                                                       RadiusY="4"
                                                       Visibility="Collapsed" />
                                        </Grid>
                                    </Border>
                                </Border>
                                <Grid x:Name="SelectedItem"
                                      Margin="-1"
                                      Visibility="Collapsed">
                                    <Border Margin="{TemplateBinding Padding}"
                                            BorderBrush="{StaticResource ControlOuterBorder_Selected}"
                                            BorderThickness="2"
                                            CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" />
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Note: If I change Visibility value to Visible in Grid "SelectedItem" all the item appear as selected.

    Do you have any suggestion for solving my problem?

    Thanks in advance.

    Eduardo.
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 31 Aug 2011 Link to this post

    Hello Eduardo,
    I guess that the example that you took the code from is old and it doesn't have the current RadTileView item style. More specifically it doesn't have the Selection visual state group and that's why you don't have a selection:
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Selected">
                <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0"
                                        Storyboard.TargetName="SelectedItem"
                                        Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Unselected" />
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    For further references could you please examine the attached project and if you have more questions feel free to ask?

    Kind regards,
    Zarko
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Eduardo
    Eduardo avatar
    14 posts
    Member since:
    Jul 2011

    Posted 01 Sep 2011 Link to this post

    Hi Zarko, thank you so much. I added the Visual State group as you suggested me and (with a couple of modifications) it works properly.

    Thanks again!
Back to Top