Skip to content

Commit 1cf8954

Browse files
spiegelpspiegelp
committed
added custom control AppBar with
- toogle button for a side nav - title - search form - content area (to add buttons for example)
1 parent 6ca43bb commit 1cf8954

File tree

4 files changed

+285
-9
lines changed

4 files changed

+285
-9
lines changed

‎MainDemo.Wpf/MainWindow.xaml

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,24 @@
2323
</Window.Resources>
2424

2525
<DockPanel>
26-
<wpf:ColorZone Padding="16" Effect="{StaticResource MaterialDesignShadowDepth2}"
27-
Mode="PrimaryMid" DockPanel.Dock="Top">
28-
<DockPanel>
29-
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="True"
30-
x:Name="MenuToggleButton"/>
31-
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22">Material Design In XAML Toolkit</TextBlock>
32-
</DockPanel>
33-
</wpf:ColorZone>
26+
<wpf:AppBar DockPanel.Dock="Top" x:Name="ActionBar" Title="Material Design in XAML Toolkit" IsNavigationDrawerOpen="True" ShowNavigationDrawerButton="True" SearchFormVisibility="Folded" SearchHint="Enter your search">
27+
<Button Style="{StaticResource MaterialDesignToolForegroundButton}">
28+
<Viewbox Width="24" Height="24">
29+
<Canvas Width="24" Height="24">
30+
<Path Data="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z" Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=Foreground}" />
31+
</Canvas>
32+
</Viewbox>
33+
</Button>
34+
<Button Style="{StaticResource MaterialDesignToolForegroundButton}">
35+
<Viewbox Width="24" Height="24">
36+
<Canvas Width="24" Height="24">
37+
<Path Data="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8M7.88,3.39L6.6,1.86L2,5.71L3.29,7.24L7.88,3.39M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72Z" Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=Foreground}" />
38+
</Canvas>
39+
</Viewbox>
40+
</Button>
41+
</wpf:AppBar>
3442
<ListBox DockPanel.Dock="Left" x:Name="DemoItemsListBox" Margin="16 16 0 16" SelectedIndex="0"
35-
Visibility="{Binding ElementName=MenuToggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
43+
Visibility="{Binding ElementName=ActionBar, Path=IsNavigationDrawerOpen, Converter={StaticResource BooleanToVisibilityConverter}}">
3644
<ListBox.ItemTemplate>
3745
<DataTemplate DataType="domain:DemoItem">
3846
<TextBlock Text="{Binding Name}" />

‎MaterialDesignThemes.Wpf/AppBar.xaml

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<UserControl x:Class="MaterialDesignThemes.Wpf.AppBar"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
7+
xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters"
8+
mc:Ignorable="d"
9+
d:DesignWidth="500" Effect="{StaticResource MaterialDesignShadowDepth2}" Height="56" HorizontalAlignment="Stretch">
10+
<UserControl.Resources>
11+
<converters:NotZeroToVisibilityConverter x:Key="NotZeroToVisibilityConverter" />
12+
</UserControl.Resources>
13+
<Grid>
14+
<wpf:ColorZone Mode="PrimaryMid" Height="56">
15+
<Grid Height="45" Margin="0,5,0,0">
16+
<Grid.ColumnDefinitions>
17+
<ColumnDefinition Width="Auto" />
18+
<ColumnDefinition Width="*" />
19+
<ColumnDefinition Width="Auto" />
20+
</Grid.ColumnDefinitions>
21+
<StackPanel Grid.Column="0" Orientation="Horizontal">
22+
<ToggleButton IsChecked="{Binding Path=IsNavigationDrawerOpen}" Margin="6,0,0,0" x:Name="MenuToggleButton">
23+
<ToggleButton.Style>
24+
<Style BasedOn="{StaticResource MaterialDesignHamburgerToggleButton}" TargetType="{x:Type ToggleButton}">
25+
<Style.Triggers>
26+
<DataTrigger Binding="{Binding Path=ShowNavigationDrawerButton}" Value="False">
27+
<Setter Property="Visibility" Value="Collapsed" />
28+
</DataTrigger>
29+
<DataTrigger Binding="{Binding Path=ShowNavigationDrawerButton}" Value="True">
30+
<Setter Property="Visibility" Value="Visible" />
31+
</DataTrigger>
32+
</Style.Triggers>
33+
</Style>
34+
</ToggleButton.Style>
35+
</ToggleButton>
36+
<TextBlock x:Name="TitleText" FontSize="22" HorizontalAlignment="Left" Margin="16,0,16,0" Text="{Binding Path=Title}" VerticalAlignment="Center" />
37+
</StackPanel>
38+
<StackPanel Grid.Column="1" x:Name="SearchFormStackPanel" HorizontalAlignment="Right" Margin="0,0,8,0" Orientation="Horizontal">
39+
<StackPanel.Style>
40+
<Style TargetType="{x:Type StackPanel}">
41+
<Style.Triggers>
42+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Folded">
43+
<Setter Property="Visibility" Value="Visible" />
44+
</DataTrigger>
45+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Hidden">
46+
<Setter Property="Visibility" Value="Collapsed" />
47+
</DataTrigger>
48+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Visible">
49+
<Setter Property="Visibility" Value="Visible" />
50+
</DataTrigger>
51+
</Style.Triggers>
52+
</Style>
53+
</StackPanel.Style>
54+
<wpf:ColorZone Mode="Standard" Padding="8,4,8,4" CornerRadius="2" Panel.ZIndex="1" HorizontalAlignment="Right" VerticalAlignment="Center" Effect="{StaticResource MaterialDesignShadowDepth1}">
55+
<wpf:ColorZone.Style>
56+
<Style TargetType="{x:Type wpf:ColorZone}">
57+
<Style.Triggers>
58+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Folded">
59+
<Setter Property="Visibility" Value="Collapsed" />
60+
</DataTrigger>
61+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Hidden">
62+
<Setter Property="Visibility" Value="Collapsed" />
63+
</DataTrigger>
64+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Visible">
65+
<Setter Property="Visibility" Value="Visible" />
66+
</DataTrigger>
67+
</Style.Triggers>
68+
</Style>
69+
</wpf:ColorZone.Style>
70+
<Grid x:Name="SearchGrid">
71+
<Grid.ColumnDefinitions>
72+
<ColumnDefinition Width="*" />
73+
<ColumnDefinition Width="Auto" />
74+
</Grid.ColumnDefinitions>
75+
<TextBox x:Name="SearchTextBox" Margin="0" wpf:TextFieldAssist.Hint="{Binding Path=SearchHint}" MinWidth="200" Text="{Binding Path=SearchTerm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" KeyDown="KeyDownHandler" />
76+
<Button Grid.Column="1" Style="{StaticResource MaterialDesignToolButton}" x:Name="SearchButton" Click="SearchButtonClickHandler">
77+
<Viewbox Width="16" Height="16" Margin="8,0,0,0" VerticalAlignment="Center" Opacity=".56">
78+
<Canvas Width="24" Height="24">
79+
<Path Data="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
80+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:ColorZone}, Path=Foreground}" />
81+
</Canvas>
82+
</Viewbox>
83+
</Button>
84+
</Grid>
85+
</wpf:ColorZone>
86+
<Button x:Name="OpenSearchButton" HorizontalAlignment="Right" Click="SearchButtonClickHandler">
87+
<Button.Style>
88+
<Style BasedOn="{StaticResource MaterialDesignToolForegroundButton}" TargetType="{x:Type Button}">
89+
<Style.Triggers>
90+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Folded">
91+
<Setter Property="Visibility" Value="Visible" />
92+
</DataTrigger>
93+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Hidden">
94+
<Setter Property="Visibility" Value="Collapsed" />
95+
</DataTrigger>
96+
<DataTrigger Binding="{Binding Path=SearchFormVisibility}" Value="Visible">
97+
<Setter Property="Visibility" Value="Collapsed" />
98+
</DataTrigger>
99+
</Style.Triggers>
100+
</Style>
101+
</Button.Style>
102+
<Viewbox Width="24" Height="24" VerticalAlignment="Center">
103+
<Canvas Width="24" Height="24">
104+
<Path Data="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=Foreground}" />
105+
</Canvas>
106+
</Viewbox>
107+
</Button>
108+
</StackPanel>
109+
<StackPanel Grid.Column="2" x:Name="PartHostActionButtons" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,6,0" VerticalAlignment="Stretch" Visibility="{Binding Path=Children.Count, Converter={StaticResource NotZeroToVisibilityConverter}}" />
110+
</Grid>
111+
</wpf:ColorZone>
112+
</Grid>
113+
</UserControl>

‎MaterialDesignThemes.Wpf/AppBar.xaml.cs

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
using System.Windows.Controls;
8+
using System.Windows.Data;
9+
using System.Windows.Documents;
10+
using System.Windows.Input;
11+
using System.Windows.Markup;
12+
using System.Windows.Media;
13+
using System.Windows.Media.Imaging;
14+
using System.Windows.Navigation;
15+
using System.Windows.Shapes;
16+
17+
namespace MaterialDesignThemes.Wpf
18+
{
19+
[ContentProperty("Children")]
20+
public partial class AppBar : UserControl
21+
{
22+
public static readonly RoutedEvent SearchEvent = EventManager.RegisterRoutedEvent("Search", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(AppBar));
23+
24+
public event RoutedEventHandler Search
25+
{
26+
add { AddHandler(SearchEvent, value); }
27+
remove { RemoveHandler(SearchEvent, value); }
28+
}
29+
30+
public static readonly DependencyPropertyKey ChildrenProperty = DependencyProperty.RegisterReadOnly("Children", typeof(UIElementCollection), typeof(AppBar), new PropertyMetadata());
31+
32+
public UIElementCollection Children
33+
{
34+
get { return (UIElementCollection)GetValue(ChildrenProperty.DependencyProperty); }
35+
private set { SetValue(ChildrenProperty, value); }
36+
}
37+
38+
public static readonly DependencyProperty IsNavigationDrawerOpenProperty = DependencyProperty.Register("IsNavigationDrawerOpen", typeof(bool), typeof(AppBar));
39+
40+
public bool IsNavigationDrawerOpen
41+
{
42+
get { return (bool)GetValue(IsNavigationDrawerOpenProperty); }
43+
set { SetValue(IsNavigationDrawerOpenProperty, value); }
44+
}
45+
46+
public static readonly DependencyProperty SearchFormVisibilityProperty = DependencyProperty.Register("SearchFormVisibility", typeof(SearchFormVisibility), typeof(AppBar));
47+
48+
public SearchFormVisibility SearchFormVisibility
49+
{
50+
get { return (SearchFormVisibility)GetValue(SearchFormVisibilityProperty); }
51+
set { SetValue(SearchFormVisibilityProperty, value); }
52+
}
53+
54+
public static readonly DependencyProperty SearchHintProperty = DependencyProperty.Register("SearchHint", typeof(string), typeof(AppBar));
55+
56+
public string SearchHint
57+
{
58+
get { return (string)GetValue(SearchHintProperty); }
59+
set { SetValue(SearchHintProperty, value); }
60+
}
61+
62+
public static readonly DependencyProperty SearchTermProperty = DependencyProperty.Register("SearchTerm", typeof(string), typeof(AppBar));
63+
64+
public string SearchTerm
65+
{
66+
get { return (string)GetValue(SearchTermProperty); }
67+
set { SetValue(SearchTermProperty, value); }
68+
}
69+
70+
public static readonly DependencyProperty ShowNavigationDrawerButtonProperty = DependencyProperty.Register("ShowNavigationDrawerButton", typeof(bool), typeof(AppBar));
71+
72+
public bool ShowNavigationDrawerButton
73+
{
74+
get { return (bool)GetValue(ShowNavigationDrawerButtonProperty); }
75+
set { SetValue(ShowNavigationDrawerButtonProperty, value); }
76+
}
77+
78+
public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(AppBar));
79+
80+
public string Title
81+
{
82+
get { return (string)GetValue(TitleProperty); }
83+
set { SetValue(TitleProperty, value); }
84+
}
85+
86+
public AppBar()
87+
{
88+
SearchFormVisibility = SearchFormVisibility.Folded;
89+
ShowNavigationDrawerButton = true;
90+
IsNavigationDrawerOpen = false;
91+
92+
InitializeComponent();
93+
94+
MenuToggleButton.DataContext = this;
95+
TitleText.DataContext = this;
96+
OpenSearchButton.DataContext = this;
97+
SearchFormStackPanel.DataContext = this;
98+
SearchTextBox.DataContext = this;
99+
PartHostActionButtons.DataContext = this;
100+
101+
Children = PartHostActionButtons.Children;
102+
}
103+
104+
private void SearchButtonClickHandler(object sender, RoutedEventArgs args)
105+
{
106+
if (SearchFormVisibility == SearchFormVisibility.Folded)
107+
{
108+
SearchFormVisibility = SearchFormVisibility.Visible;
109+
SearchTextBox.Focus();
110+
}
111+
else if (SearchFormVisibility == SearchFormVisibility.Visible)
112+
{
113+
RaiseEvent(new ActionBarSearchEventArgs(SearchEvent, SearchTerm));
114+
}
115+
}
116+
117+
private void KeyDownHandler(object sender, KeyEventArgs args)
118+
{
119+
if (sender == SearchTextBox && args.Key == Key.Enter)
120+
{
121+
Keyboard.ClearFocus();
122+
RaiseEvent(new ActionBarSearchEventArgs(SearchEvent, SearchTerm));
123+
}
124+
}
125+
}
126+
127+
public enum SearchFormVisibility
128+
{
129+
Folded,
130+
Hidden,
131+
Visible
132+
}
133+
134+
public class ActionBarSearchEventArgs : RoutedEventArgs
135+
{
136+
public string SearchTerm
137+
{
138+
get;
139+
protected set;
140+
}
141+
142+
public ActionBarSearchEventArgs(RoutedEvent routedEvent, string searchTerm)
143+
: base(routedEvent)
144+
{
145+
SearchTerm = searchTerm;
146+
}
147+
}
148+
}

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@
5656
<Reference Include="PresentationFramework" />
5757
</ItemGroup>
5858
<ItemGroup>
59+
<Page Include="AppBar.xaml">
60+
<SubType>Designer</SubType>
61+
<Generator>MSBuild:Compile</Generator>
62+
</Page>
5963
<Page Include="ProgressLoopDev.xaml">
6064
<SubType>Designer</SubType>
6165
<Generator>MSBuild:Compile</Generator>
@@ -186,6 +190,9 @@
186190
</Page>
187191
</ItemGroup>
188192
<ItemGroup>
193+
<Compile Include="AppBar.xaml.cs">
194+
<DependentUpon>AppBar.xaml</DependentUpon>
195+
</Compile>
189196
<Compile Include="Card.cs" />
190197
<Compile Include="Clock.cs" />
191198
<Compile Include="ClockChoiceMadeEventArgs.cs" />

0 commit comments

Comments
 (0)