Category / Section
How to customize the border around the item of SfTileView?
2 mins read
When we hover the TileViewItem, rectangle will be displayed around the TileViewItem. We can customize the appearance of this rectangle by customizing the style of the TileViewItem. For instance, we have changed the color of the rectangle in below code example,
Mainwindow.xaml:
<syncfusion:SfTileView x:Name="tileview"> <syncfusion:SfTileViewItem Content="TileItem1" /> <syncfusion:SfTileViewItem Content="TileItem2" /> <syncfusion:SfTileViewItem Content="TileItem3"/> <syncfusion:SfTileViewItem Content="TileItem4"/> <syncfusion:SfTileViewItem Content="TileItem5"/> </syncfusion:SfTileView>
Style of TileViewItem:
<SolidColorBrush x:Key="SelectedItemBorderColor" Color="Red" />
<Style TargetType="syncfusion:SfTileViewItem">
<Setter Property="Margin" Value="5" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:SfTileViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.3"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PART_Host"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DragDropStates">
<VisualState x:Name="ScaleIn">
<Storyboard >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Host">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Preview">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
<Storyboard >
<Storyboard x:Name="Storyboard4">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="PART_PreviewHost">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase Exponent="6"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="PART_PreviewHost">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase Exponent="6"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="PART_Host">
<Grid.RenderTransform>
<CompositeTransform />
</Grid.RenderTransform>
<Rectangle Margin="-3" Fill="Transparent" Stroke="{StaticResource SelectedItemBorderColor}" StrokeThickness="3" Opacity="0"
x:Name="PointerOverRect"/>
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
</Grid>
<Popup x:Name="PART_Preview" IsHitTestVisible="False">
<Grid x:Name="PART_PreviewHost" Opacity="0.8" Background="{TemplateBinding Background}">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Output:
Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TileViewSample-1477846858.zip
