|
By customizing the HeaderTemplate, we can display the required information in Header of the TileViewItem. For instance, we have added extra button (“Settings button”) in the Header of the TileViewItem. The following code example demonstrate the same,
HeaderTemplate : <DataTemplate x:Key="TileViewHeaderTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}"/>
<ToggleButton Margin="0" Grid.Column="2" BorderThickness="0" Background="Transparent" Command="{Binding SettingCommand}" DataContext="{Binding DataContext, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type syncfusion:TileViewControl}}}">
<Path Data="M31.679651,15.723C22.841078,15.723 15.677,22.887022 15.677,31.724249 15.677,40.562878 22.841078,47.727002 31.679651,47.727002 40.518124,47.727002 47.682003,40.562878 47.682003,31.724249 47.682003,22.887022 40.518124,15.723 31.679651,15.723z M25.174641,0L30.947304,8.1649995 30.977009,8.163671C31.891628,8.1361193,32.811726,8.1617675,33.732849,8.2423577L34.116646,8.2807278 40.096367,0.5289996 49.181995,4.5158782 47.510448,14.236901 47.626137,14.339919C48.479649,15.11912,49.268909,15.955267,49.990528,16.839653L50.234638,17.14785 60.403648,15.836 64.007996,25.079203 55.322643,31.217757 55.324234,31.258986C55.34618,32.174153,55.314838,33.094563,55.22847,34.015755L55.226952,34.030385 63.345997,40.294331 59.359104,49.380002 49.249798,47.645153 49.143776,47.764214C48.695721,48.255009,48.228832,48.72456,47.744774,49.172226L47.324875,49.549786 48.723995,60.394425 39.48156,64 33.403603,55.403061 33.023663,55.43042C32.149929,55.481137,31.270197,55.483376,30.38839,55.435608L29.679308,55.383191 23.130268,63.875 14.041999,59.886834 15.844025,49.393521 15.71986,49.282948C15.207753,48.815411,14.718776,48.32737,14.253661,47.820706L13.803129,47.315312 3.612031,48.630002 0.0080004195,39.385499 8.0905037,33.673707 8.0481892,33.048829C7.9875851,31.908507,8.0095654,30.758269,8.1175261,29.606822L8.1191311,29.59272 0,23.328246 3.9867127,14.242 14.093521,15.978928 14.104487,15.966273C15.033746,14.935561,16.045525,13.997155,17.124784,13.156928L17.159048,13.131042 15.929999,3.6040602z" Stretch="Uniform" Fill="White" Width="16" Height="16" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</ToggleButton>
</Grid>
</DataTemplate>
Mainwindow.xaml : <syncfusion:TileViewControl Name="tileViewControl1" HeaderTemplate="{StaticResource TileViewHeaderTemplate}">
<syncfusion:TileViewItem Header="TileItem1" CloseButtonVisibility="Visible">
Content of TileItem
</syncfusion:TileViewItem>
<syncfusion:TileViewItem Header="TileItem2" CloseButtonVisibility="Visible">
Content of TileItem
</syncfusion:TileViewItem>
<syncfusion:TileViewItem Header="TileItem3" CloseButtonVisibility="Visible">
Content of TileItem
</syncfusion:TileViewItem>
</syncfusion:TileViewControl>
Mainwindow.cs: public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
private ICommand settingcommand;
public ICommand SettingCommand
{
get
{
if (settingcommand == null)
{
settingcommand = new DelegateCommand(ExecuteCommand, CanExecute);
}
return settingcommand;
}
set
{
settingcommand = value;
}
}
private bool CanExecute(object arg)
{
return true;
}
private void ExecuteCommand(object obj)
{
Console.WriteLine("Settings button is clicked");
}
}
Screenshot:
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TileView_Sample1967831717.zip
|
2X faster development
The ultimate WPF UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
