How to customize the title of the SfHubTile?

1 min read

You can customize the title of the SfHubTile control by editing the TitleStyle Property. The TargetType of the Style should be of type ContentControl. For example, you can customize the Title property of the SfHubTile control with a TextBlock to the left and another SfTextBoxExt aligned to the right, as shown in the following code.

MainPage.xaml

<notification:SfHubTile Header="Header" Title="Title" ImageSource="Assets/HubTile.png" Height="300" Width="300"
                                VerticalAlignment="Center">
            <notification:SfHubTile.TitleStyle>
                <Style TargetType="ContentControl">
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="FontSize" Value="17"/>
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding}" Margin="10"/>
                                    <input:SfTextBoxExt Text="Right-aligned Text" TextAlignment="Right" Grid.Column="1"
                                                        Height="30" VerticalAlignment="Top"/>
                                </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </notification:SfHubTile.TitleStyle>
        </notification:SfHubTile>