This is a migrated thread and some comments may be shown as answers.

Tile View Item Selection

2 Answers 272 Views

TileView

This is a migrated thread and some comments may be shown as answers.

Eduardo asked on 26 Aug 2011, 11:08 AM

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>

<!--

<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>

<Grid x:Name="SelectedItem"

Margin="-1"

Visibility="Collapsed">

<Border Margin="{TemplateBinding Padding}"

BorderBrush="{StaticResource ControlOuterBorder_Selected}"

BorderThickness="2"

CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" />

</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 Answers, 1 is accepted

answered on 31 Aug 2011, 03:15 PM

SilverlightApplication3.zip

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 >>