We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to have a additional button in Header of TileViewItem


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

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile