Back to Devexpress

TileLayoutControl.GroupHeaderTemplate Property

wpf-devexpress-dot-xpf-dot-layoutcontrol-dot-tilelayoutcontrol-85477ca8.md

latest3.4 KB
Original Source

TileLayoutControl.GroupHeaderTemplate Property

Gets or sets a data template for tile group headers. This is a dependency property.

Namespace : DevExpress.Xpf.LayoutControl

Assembly : DevExpress.Xpf.LayoutControl.v25.2.dll

NuGet Package : DevExpress.Wpf.LayoutControl

Declaration

csharp
public DataTemplate GroupHeaderTemplate { get; set; }
vb
Public Property GroupHeaderTemplate As DataTemplate

Property Value

TypeDescription
DataTemplate

The template for tile group headers.

|

Remarks

The following example uses the GroupHeaderTemplate property to create a data template for tile group headers:

xaml
<dxlc:TileLayoutControl Name="tileLayoutControl"
                        ShowGroupHeaders="True">
    <dxlc:TileLayoutControl.GroupHeaderTemplate>
        <DataTemplate>
            <Border Background="#FF555555" Padding="5" CornerRadius="5">
                <TextBlock Text="{Binding}" Foreground="White" FontSize="16" FontWeight="Bold" 
                        HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
        </DataTemplate>
    </dxlc:TileLayoutControl.GroupHeaderTemplate>
    <dxlc:Tile Header="System Information" Name="tile1"
                dxlc:TileLayoutControl.GroupHeader="Group1">
        <Image Name="system-image" Stretch="None" Source="Images/System.png"/>
    </dxlc:Tile>
    <dxlc:Tile Header="Research" Name="tile2" Size="Small">
        <Image Name="research-image" Stretch="None" Source="Images/Research.png"/>
    </dxlc:Tile>
    <dxlc:Tile Header="Statistics" Name="tile3" Size="Small">
        <Image Name="stats-image" Stretch="None" Source="Images/Statistics.png" />
    </dxlc:Tile>
    <dxlc:Tile Header="Rates" Name="tile4" Size="Large"
                dxlc:FlowLayoutControl.IsFlowBreak="True"
                dxlc:TileLayoutControl.GroupHeader="Group2"
                HorizontalHeaderAlignment="Center">
        <Image Name="rates-image" Stretch="None" Source="Images/Rates.png" />
    </dxlc:Tile>
</dxlc:TileLayoutControl>

The following image displays the result:

Refer to the following help topic for additional information on data templates: Data Templating Overview.

See Also

GroupHeader

ShowGroupHeaders

TileLayoutControl Class

TileLayoutControl Members

DevExpress.Xpf.LayoutControl Namespace