Skip to content
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

Jump to bottom

SplitView and HamburgerMenu #2704

Merged
merged 7 commits into from
Oct 19, 2016
Merged

SplitView and HamburgerMenu #2704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5d6bdc1
Add SplitView control
punker76 Oct 16, 2016
95b987c
Add HamburgerMenu control
punker76 Oct 16, 2016
491fad5
Clean source
punker76 Oct 19, 2016
0d4b674
Minor changes
punker76 Oct 19, 2016
75a849c
Improve HamburgerMenu sample
punker76 Oct 19, 2016
3af4ba6
Improve HamburgerMenu
punker76 Oct 19, 2016
551e042
Improve HamburgerButtonStyle
punker76 Oct 19, 2016
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
12 changes: 12 additions & 0 deletions ...Metro.Samples/MahApps.Metro.Demo/MahApps.Metro.Demo.NET40/MahApps.Metro.Demo.NET40.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,18 @@
<Reference Include="WindowsFormsIntegration" />
</ItemGroup>
<ItemGroup>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\BigFourSummerHeat.png">
<Link>Assets\Photos\BigFourSummerHeat.png</Link>
</Resource>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\BisonBadlandsChillin.png">
<Link>Assets\Photos\BisonBadlandsChillin.png</Link>
</Resource>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\GiantSlabInOregon.png">
<Link>Assets\Photos\GiantSlabInOregon.png</Link>
</Resource>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\LakeAnnMushroom.png">
<Link>Assets\Photos\LakeAnnMushroom.png</Link>
</Resource>
<Content Include="FodyWeavers.xml" />
<Compile Include="..\MahApps.Metro.Demo.Shared\MainWindow.xaml.cs">
<Link>MainWindow.xaml.cs</Link>
Expand Down
12 changes: 12 additions & 0 deletions ...Metro.Samples/MahApps.Metro.Demo/MahApps.Metro.Demo.NET45/MahApps.Metro.Demo.NET45.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,18 @@
<Reference Include="WindowsFormsIntegration" />
</ItemGroup>
<ItemGroup>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\BigFourSummerHeat.png">
<Link>Assets\Photos\BigFourSummerHeat.png</Link>
</Resource>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\BisonBadlandsChillin.png">
<Link>Assets\Photos\BisonBadlandsChillin.png</Link>
</Resource>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\GiantSlabInOregon.png">
<Link>Assets\Photos\GiantSlabInOregon.png</Link>
</Resource>
<Resource Include="..\MahApps.Metro.Demo.Shared\Assets\Photos\LakeAnnMushroom.png">
<Link>Assets\Photos\LakeAnnMushroom.png</Link>
</Resource>
<Content Include="FodyWeavers.xml" />
<Compile Include="..\MahApps.Metro.Demo.Shared\MainWindow.xaml.cs">
<Link>MainWindow.xaml.cs</Link>
Expand Down
Binary file added ...ahApps.Metro.Demo/MahApps.Metro.Demo.Shared/Assets/Photos/BigFourSummerHeat.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...pps.Metro.Demo/MahApps.Metro.Demo.Shared/Assets/Photos/BisonBadlandsChillin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ahApps.Metro.Demo/MahApps.Metro.Demo.Shared/Assets/Photos/GiantSlabInOregon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/Assets/Photos/LakeAnnMushroom.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 118 additions & 0 deletions ...amples/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/HamburgerMenuSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<UserControl x:Class="MetroDemo.ExampleViews.HamburgerMenuSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">

<UserControl.Resources>
<DataTemplate x:Key="HamburgerMenuItem" DataType="{x:Type controls:HamburgerMenuItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="0"
Content="{Binding Tag}"
Focusable="False"
Foreground="White"
IsTabStop="False" />
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text="{Binding Label}" />
</Grid>
</DataTemplate>

<DataTemplate x:Key="HamburgerMenuImageItem" DataType="{x:Type controls:HamburgerMenuGlyphItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Margin="12"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Glyph}"
Stretch="UniformToFill" />
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text="{Binding Label}" />
</Grid>
</DataTemplate>
</UserControl.Resources>

<Grid>
<controls:HamburgerMenu x:Name="HamburgerMenuControl"
Margin="20"
Foreground="White"
HamburgerWidth="48"
ItemClick="HamburgerMenu_OnItemClick"
ItemTemplate="{StaticResource HamburgerMenuImageItem}"
OptionsItemClick="HamburgerMenu_OnOptionsItemClick"
OptionsItemTemplate="{StaticResource HamburgerMenuItem}"
PaneBackground="#FF444444">
<!-- Items -->
<controls:HamburgerMenu.ItemsSource>
<controls:HamburgerMenuItemCollection>
<controls:HamburgerMenuGlyphItem Glyph="/Assets/Photos/BigFourSummerHeat.png" Label="Big four summer heat" />
<controls:HamburgerMenuGlyphItem Glyph="/Assets/Photos/BisonBadlandsChillin.png" Label="Bison badlands Chillin" />
<controls:HamburgerMenuGlyphItem Glyph="/Assets/Photos/GiantSlabInOregon.png" Label="Giant slab in Oregon" />
<controls:HamburgerMenuGlyphItem Glyph="/Assets/Photos/LakeAnnMushroom.png" Label="Lake Ann Mushroom" />
</controls:HamburgerMenuItemCollection>
</controls:HamburgerMenu.ItemsSource>

<!-- Options -->
<controls:HamburgerMenu.OptionsItemsSource>
<controls:HamburgerMenuItemCollection>
<controls:HamburgerMenuGlyphItem Label="About">
<controls:HamburgerMenuGlyphItem.Tag>
<iconPacks:PackIconMaterial Width="22"
Height="22"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Kind="Help" />
</controls:HamburgerMenuGlyphItem.Tag>
</controls:HamburgerMenuGlyphItem>
</controls:HamburgerMenuItemCollection>
</controls:HamburgerMenu.OptionsItemsSource>

<!-- Content -->
<controls:HamburgerMenu.ContentTemplate>
<DataTemplate>
<Grid x:Name="ContentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="#7A7A7A">
<TextBlock x:Name="Header"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="24"
Foreground="White"
Text="{Binding Label}" />
</Border>
<controls:TransitioningContentControl Grid.Row="1"
Content="{Binding Glyph}"
RestartTransitionOnContentChange="True"
Transition="Default">
<controls:TransitioningContentControl.ContentTemplate>
<DataTemplate>
<Image Source="{Binding}" />
</DataTemplate>
</controls:TransitioningContentControl.ContentTemplate>
</controls:TransitioningContentControl>
</Grid>
</DataTemplate>
</controls:HamburgerMenu.ContentTemplate>
</controls:HamburgerMenu>
</Grid>
</UserControl>
25 changes: 25 additions & 0 deletions ...les/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/HamburgerMenuSample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
namespace MetroDemo.ExampleViews
{
using System.Windows.Controls;
using MahApps.Metro.Controls;
using MahApps.Metro.Controls.Dialogs;

public sealed partial class HamburgerMenuSample : UserControl
{
public HamburgerMenuSample()
{
this.InitializeComponent();
}

private void HamburgerMenu_OnItemClick(object sender, ItemClickEventArgs e)
{
HamburgerMenuControl.Content = e.ClickedItem;
}

private async void HamburgerMenu_OnOptionsItemClick(object sender, ItemClickEventArgs e)
{
var menuItem = e.ClickedItem as HamburgerMenuItem;
await this.TryFindParent<MetroWindow>().ShowMessageAsync("", $"You clicked on {menuItem.Label} button");
}
}
}
168 changes: 168 additions & 0 deletions ....Samples/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/SplitViewExamples.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<UserControl x:Class="MetroDemo.ExampleViews.SplitViewExamples"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:metroDemo="clr-namespace:MetroDemo"
d:DataContext="{d:DesignInstance metroDemo:MainWindowViewModel}"
d:DesignHeight="600"
d:DesignWidth="800"
mc:Ignorable="d">

<!-- #Resources -->
<UserControl.Resources>
<ResourceDictionary>
<Color x:Key="SystemBaseMediumColor">#99FFFFFF</Color>

<SolidColorBrush x:Key="SplitViewBackgroundBrush"
Opacity="1"
Color="{StaticResource SystemBaseMediumColor}" />

<Style TargetType="{x:Type controls:SplitView}">
<Setter Property="CompactPaneLength" Value="48" />
<Setter Property="DisplayMode" Value="CompactOverlay" />
<Setter Property="IsPaneOpen" Value="False" />
<Setter Property="OpenPaneLength" Value="320" />
<Setter Property="PaneBackground" Value="{StaticResource SplitViewBackgroundBrush}" />
</Style>

<!-- #Templates -->
<ControlTemplate x:Key="ConfigDataTemplate">
<Grid d:DataContext="{d:DesignInstance controls:SplitView}" Grid.IsSharedSizeScope="True">

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="labels" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<TextBlock Grid.Row="0"
Grid.Column="0"
Margin="2"
VerticalAlignment="Center"
Text="IsOpen" />
<CheckBox Grid.Row="0"
Grid.Column="1"
Margin="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
IsChecked="{Binding IsPaneOpen}" />

<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="2"
VerticalAlignment="Center"
Text="DisplayMode" />
<ComboBox Grid.Row="1"
Grid.Column="1"
Width="100"
Margin="2"
VerticalAlignment="Center"
SelectedValue="{Binding DisplayMode}">
<controls:SplitViewDisplayMode>Inline</controls:SplitViewDisplayMode>
<controls:SplitViewDisplayMode>Overlay</controls:SplitViewDisplayMode>
<controls:SplitViewDisplayMode>CompactInline</controls:SplitViewDisplayMode>
<controls:SplitViewDisplayMode>CompactOverlay</controls:SplitViewDisplayMode>
</ComboBox>

<TextBlock Grid.Row="2"
Grid.Column="0"
Margin="2"
VerticalAlignment="Center"
Text="PanePlacement" />
<ComboBox Grid.Row="2"
Grid.Column="1"
Width="100"
Margin="2"
VerticalAlignment="Center"
SelectedValue="{Binding PanePlacement}">
<controls:SplitViewPanePlacement>Left</controls:SplitViewPanePlacement>
<controls:SplitViewPanePlacement>Right</controls:SplitViewPanePlacement>
</ComboBox>

<TextBlock Grid.Row="3"
Grid.Column="0"
Margin="2"
VerticalAlignment="Center"
Text="CancelClose" />
<CheckBox Grid.Row="3"
Grid.Column="1"
Margin="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
IsChecked="{Binding Tag, Mode=TwoWay}" />
</Grid>
</ControlTemplate>
</ResourceDictionary>
</UserControl.Resources>

<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>


<Label Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Left"
Content="Simple SplitView example"
Style="{DynamicResource DescriptionHeaderStyle}" />

<ContentControl Grid.Row="1"
Grid.Column="0"
Margin="10 5 5 5"
DataContext="{Binding ElementName=SimpleSplitview}"
Template="{StaticResource ConfigDataTemplate}" />

<controls:SplitView x:Name="SimpleSplitview"
Grid.Row="1"
Grid.Column="1"
Margin="5"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="150"
PaneBackground="Red"
PaneClosing="Splitview_PaneClosing">
<controls:SplitView.Pane>
<Grid Margin="48 0 0 0" Background="LightGreen">
<TextBlock Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20"
Foreground="White"
Text="Pane content area"
TextWrapping="Wrap" />
</Grid>
</controls:SplitView.Pane>

<Grid Background="CornflowerBlue">
<TextBlock Margin="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20"
Foreground="White"
Text="This is the main content area and should be blue"
TextWrapping="Wrap" />
</Grid>

</controls:SplitView>
</Grid>
</ScrollViewer>
</UserControl>
28 changes: 28 additions & 0 deletions ...mples/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/SplitViewExamples.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
namespace MetroDemo.ExampleViews
{
using MahApps.Metro.Controls;

/// <summary>
/// Interaction logic for SplitViewExamples.xaml
/// </summary>
public partial class SplitViewExamples
{
public SplitViewExamples()
{
this.InitializeComponent();

// The Tag is used to handle closing
this.SimpleSplitview.Tag = false;
}

private void Splitview_PaneClosing(object sender, SplitViewPaneClosingEventArgs e)
{
var splitView = sender as SplitView;

if (splitView == null)
return;

e.Cancel = (bool)splitView.Tag;
}
}
}
Loading