Skip to content

Add DrawerHeaderTemplate and DrawerFooterTemplate properties to DrawerPage #21008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MrJul merged 2 commits into from
Mar 27, 2026
Merged

Add DrawerHeaderTemplate and DrawerFooterTemplate properties to DrawerPage #21008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e371c9e
Add DrawerHeaderTemplate and DrawerFooterTemplate properties to Drawe…
jsuarezruiz Mar 27, 2026
9471ae3
Updated sample
jsuarezruiz Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions samples/ControlCatalog/Pages/DrawerPage/DrawerPageCustomizationPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,14 @@
<ComboBoxItem Content="Purple" />
</ComboBox>

<TextBlock Text="Header Template" FontSize="12" Opacity="0.7" />
<ComboBox x:Name="HeaderTemplateCombo" SelectedIndex="0"
SelectionChanged="OnHeaderTemplateChanged" HorizontalAlignment="Stretch">
<ComboBoxItem Content="None (direct control)" />
<ComboBoxItem Content="Banner" />
<ComboBoxItem Content="Avatar card" />
</ComboBox>

<TextBlock Text="Footer Background" FontSize="12" Opacity="0.7" />
<ComboBox x:Name="FooterBgCombo" SelectedIndex="0"
SelectionChanged="OnFooterBgChanged" HorizontalAlignment="Stretch">
Expand All @@ -82,6 +90,14 @@
<ComboBoxItem Content="Maroon" />
</ComboBox>

<TextBlock Text="Footer Template" FontSize="12" Opacity="0.7" />
<ComboBox x:Name="FooterTemplateCombo" SelectedIndex="0"
SelectionChanged="OnFooterTemplateChanged" HorizontalAlignment="Stretch">
<ComboBoxItem Content="None (direct control)" />
<ComboBoxItem Content="Version badge" />
<ComboBoxItem Content="Icon + label" />
</ComboBox>

<TextBlock Text="Drawer Icon" FontSize="12" Opacity="0.7" />
<ComboBox x:Name="IconCombo" SelectedIndex="0"
SelectionChanged="OnIconChanged" HorizontalAlignment="Stretch">
Expand Down
125 changes: 123 additions & 2 deletions samples/ControlCatalog/Pages/DrawerPage/DrawerPageCustomizationPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
using System.Linq;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Controls.Templates;
using Avalonia.Input.GestureRecognizers;
using Avalonia.Interactivity;
using Avalonia.Layout;
using Avalonia.Media;

namespace ControlCatalog.Pages
Expand Down Expand Up @@ -164,7 +166,7 @@ private void OnShowHeaderToggled(object? sender, RoutedEventArgs e)
if (!_isLoaded)
return;
if (ShowHeaderCheck.IsChecked == true)
DemoDrawer.DrawerHeader = DrawerHeaderBorder;
DemoDrawer.DrawerHeader = HeaderTemplateCombo.SelectedIndex == 0 ? DrawerHeaderBorder : (object)"My Application";
else
DemoDrawer.DrawerHeader = null;
}
Expand All @@ -174,9 +176,128 @@ private void OnShowFooterToggled(object? sender, RoutedEventArgs e)
if (!_isLoaded)
return;
if (ShowFooterCheck.IsChecked == true)
DemoDrawer.DrawerFooter = DrawerFooterBorder;
{
DemoDrawer.DrawerFooter = FooterTemplateCombo.SelectedIndex switch
{
1 => (object)"v12.0",
2 => (object)"Avalonia",
_ => DrawerFooterBorder
};
}
else
{
DemoDrawer.DrawerFooter = null;
}
}

private void OnHeaderTemplateChanged(object? sender, SelectionChangedEventArgs e)
{
if (!_isLoaded)
return;

switch (HeaderTemplateCombo.SelectedIndex)
{
case 1:
DemoDrawer.DrawerHeader = "My Application";
DemoDrawer.DrawerHeaderTemplate = new FuncDataTemplate<string>((data, _) =>
new Border
{
Padding = new Avalonia.Thickness(16),
Child = new StackPanel
{
Spacing = 2,
Children =
{
new TextBlock { Text = data, FontSize = 18, FontWeight = FontWeight.SemiBold, Foreground = Brushes.White },
new TextBlock { Text = "Navigation", FontSize = 12, Foreground = Brushes.White, Opacity = 0.7 }
}
}
});
break;

case 2:
DemoDrawer.DrawerHeader = "My Application";
DemoDrawer.DrawerHeaderTemplate = new FuncDataTemplate<string>((data, _) =>
{
var initial = data?.Length > 0 ? data[0].ToString().ToUpperInvariant() : "?";
var avatar = new Border
{
Width = 40,
Height = 40,
CornerRadius = new Avalonia.CornerRadius(20),
Background = new SolidColorBrush(Color.Parse("#1976D2")),
Child = new TextBlock
{
Text = initial,
FontSize = 18,
FontWeight = FontWeight.Bold,
Foreground = Brushes.White,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center
}
};
var label = new TextBlock { Text = data, FontSize = 14, FontWeight = FontWeight.SemiBold, VerticalAlignment = VerticalAlignment.Center };
var row = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 10 };
row.Children.Add(avatar);
row.Children.Add(label);
return new Border { Padding = new Avalonia.Thickness(12), Child = row };
});
break;

default:
DemoDrawer.DrawerHeader = DrawerHeaderBorder;
DemoDrawer.DrawerHeaderTemplate = null;
break;
}
}

private void OnFooterTemplateChanged(object? sender, SelectionChangedEventArgs e)
{
if (!_isLoaded)
return;

switch (FooterTemplateCombo.SelectedIndex)
{
case 1:
DemoDrawer.DrawerFooter = "v12.0";
DemoDrawer.DrawerFooterTemplate = new FuncDataTemplate<string>((data, _) =>
new Border
{
Padding = new Avalonia.Thickness(12, 8),
Child = new Border
{
Padding = new Avalonia.Thickness(8, 4),
CornerRadius = new Avalonia.CornerRadius(4),
Background = new SolidColorBrush(Color.Parse("#1976D2")),
Child = new TextBlock { Text = data, FontSize = 11, Foreground = Brushes.White, FontWeight = FontWeight.SemiBold }
}
});
break;

case 2:
DemoDrawer.DrawerFooter = "Avalonia";
DemoDrawer.DrawerFooterTemplate = new FuncDataTemplate<string>((data, _) =>
{
var icon = new PathIcon
{
Width = 14,
Height = 14,
Data = Geometry.Parse("M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"),
Opacity = 0.5
};
var label = new TextBlock { Text = data, FontSize = 12, Opacity = 0.6, VerticalAlignment = VerticalAlignment.Center };
var row = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 6 };
row.Children.Add(icon);
row.Children.Add(label);
return new Border { Padding = new Avalonia.Thickness(14, 10), Child = row };
});
break;

default:
DemoDrawer.DrawerFooter = DrawerFooterBorder;
DemoDrawer.DrawerFooterTemplate = null;
break;
}
}

private void OnMenuItemClick(object? sender, RoutedEventArgs e)
Expand Down
32 changes: 32 additions & 0 deletions src/Avalonia.Controls/Page/DrawerPage.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,18 @@ public class DrawerPage : Page
public static readonly StyledProperty<object?> DrawerFooterProperty =
AvaloniaProperty.Register<DrawerPage, object?>(nameof(DrawerFooter));

/// <summary>
/// Defines the <see cref="DrawerHeaderTemplate"/> property.
/// </summary>
public static readonly StyledProperty<IDataTemplate?> DrawerHeaderTemplateProperty =
AvaloniaProperty.Register<DrawerPage, IDataTemplate?>(nameof(DrawerHeaderTemplate));

/// <summary>
/// Defines the <see cref="DrawerFooterTemplate"/> property.
/// </summary>
public static readonly StyledProperty<IDataTemplate?> DrawerFooterTemplateProperty =
AvaloniaProperty.Register<DrawerPage, IDataTemplate?>(nameof(DrawerFooterTemplate));

/// <summary>
/// Defines the <see cref="DrawerIcon"/> property.
/// </summary>
Expand Down Expand Up @@ -403,6 +415,7 @@ public DrawerPlacement DrawerPlacement
/// <summary>
/// Gets or sets the header content displayed at the top of the drawer pane.
/// </summary>
[DependsOn(nameof(DrawerHeaderTemplate))]
public object? DrawerHeader
{
get => GetValue(DrawerHeaderProperty);
Expand All @@ -412,12 +425,31 @@ public object? DrawerHeader
/// <summary>
/// Gets or sets the footer content displayed at the bottom of the drawer pane.
/// </summary>
[DependsOn(nameof(DrawerFooterTemplate))]
public object? DrawerFooter
{
get => GetValue(DrawerFooterProperty);
set => SetValue(DrawerFooterProperty, value);
}

/// <summary>
/// Gets or sets the data template used to display <see cref="DrawerHeader"/>.
/// </summary>
public IDataTemplate? DrawerHeaderTemplate
{
get => GetValue(DrawerHeaderTemplateProperty);
set => SetValue(DrawerHeaderTemplateProperty, value);
}

/// <summary>
/// Gets or sets the data template used to display <see cref="DrawerFooter"/>.
/// </summary>
public IDataTemplate? DrawerFooterTemplate
{
get => GetValue(DrawerFooterTemplateProperty);
set => SetValue(DrawerFooterTemplateProperty, value);
}

/// <summary>
/// Gets or sets the icon displayed in the drawer toggle button.
/// </summary>
Expand Down
2 changes: 2 additions & 0 deletions src/Avalonia.Themes.Fluent/Controls/DrawerPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,13 @@
<ContentPresenter Name="PART_DrawerHeader"
DockPanel.Dock="Top"
Content="{TemplateBinding DrawerHeader}"
ContentTemplate="{TemplateBinding DrawerHeaderTemplate}"
Background="{TemplateBinding DrawerHeaderBackground}"
IsVisible="{TemplateBinding DrawerHeader, Converter={x:Static ObjectConverters.IsNotNull}}" />
<ContentPresenter Name="PART_DrawerFooter"
DockPanel.Dock="Bottom"
Content="{TemplateBinding DrawerFooter}"
ContentTemplate="{TemplateBinding DrawerFooterTemplate}"
Background="{TemplateBinding DrawerFooterBackground}"
IsVisible="{TemplateBinding DrawerFooter, Converter={x:Static ObjectConverters.IsNotNull}}" />
<ContentPresenter Name="PART_DrawerPresenter"
Expand Down
2 changes: 2 additions & 0 deletions src/Avalonia.Themes.Simple/Controls/DrawerPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,13 @@
<ContentPresenter Name="PART_DrawerHeader"
DockPanel.Dock="Top"
Content="{TemplateBinding DrawerHeader}"
ContentTemplate="{TemplateBinding DrawerHeaderTemplate}"
Background="{TemplateBinding DrawerHeaderBackground}"
IsVisible="{TemplateBinding DrawerHeader, Converter={x:Static ObjectConverters.IsNotNull}}" />
<ContentPresenter Name="PART_DrawerFooter"
DockPanel.Dock="Bottom"
Content="{TemplateBinding DrawerFooter}"
ContentTemplate="{TemplateBinding DrawerFooterTemplate}"
Background="{TemplateBinding DrawerFooterBackground}"
IsVisible="{TemplateBinding DrawerFooter, Converter={x:Static ObjectConverters.IsNotNull}}" />
<ContentPresenter Name="PART_DrawerPresenter"
Expand Down
Loading