Articles in this section
Category / Section

How to have a additional button in Header of TileViewItem

1 min read

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:

Main Window

 

Sample :

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TileView_Sample1967831717.zip

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied