Skip to content

Commit 22fedd2

Browse files
spiegelpspiegelp
committed
ListBox template for a grid view layout
1 parent 7e73c8e commit 22fedd2

File tree

9 files changed

+269
-1
lines changed

9 files changed

+269
-1
lines changed

‎MainDemo.Wpf/Domain/GridViewItemViewModel.cs

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.ComponentModel;
4+
using System.Linq;
5+
using System.Runtime.CompilerServices;
6+
using System.Text;
7+
using System.Threading.Tasks;
8+
9+
namespace MaterialDesignColors.WpfExample.Domain
10+
{
11+
public class GridViewItemViewModel : INotifyPropertyChanged
12+
{
13+
private string _pathData;
14+
private string _description;
15+
16+
public string Description
17+
{
18+
get
19+
{
20+
return _description;
21+
}
22+
23+
set
24+
{
25+
_description = value;
26+
27+
OnPropertyChanged();
28+
}
29+
}
30+
31+
public string PathData
32+
{
33+
get
34+
{
35+
return _pathData;
36+
}
37+
38+
set
39+
{
40+
_pathData = value;
41+
42+
OnPropertyChanged();
43+
}
44+
}
45+
46+
public GridViewItemViewModel() { }
47+
48+
public event PropertyChangedEventHandler PropertyChanged;
49+
50+
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
51+
{
52+
var handler = PropertyChanged;
53+
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
54+
}
55+
}
56+
}

‎MainDemo.Wpf/Domain/GridViewViewModel.cs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Collections.ObjectModel;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
8+
namespace MaterialDesignColors.WpfExample.Domain
9+
{
10+
public class GridViewViewModel
11+
{
12+
private ObservableCollection<GridViewItemViewModel> _items;
13+
14+
public ObservableCollection<GridViewItemViewModel> Items
15+
{
16+
get
17+
{
18+
return _items;
19+
}
20+
}
21+
22+
public GridViewViewModel()
23+
{
24+
_items = new ObservableCollection<GridViewItemViewModel>() {
25+
new GridViewItemViewModel() { Description = "Camera", PathData = "M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" },
26+
new GridViewItemViewModel() { Description = "Star", PathData = "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" },
27+
new GridViewItemViewModel() { Description = "Favorite", PathData = "M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" },
28+
new GridViewItemViewModel() { Description = "Alarm", PathData = "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" },
29+
new GridViewItemViewModel() { Description = "Watch", PathData = "M6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12M20,12C20,9.45 18.81,7.19 16.95,5.73L16,0H8L7.05,5.73C5.19,7.19 4,9.45 4,12C4,14.54 5.19,16.81 7.05,18.27L8,24H16L16.95,18.27C18.81,16.81 20,14.54 20,12Z" }
30+
};
31+
}
32+
}
33+
}

‎MainDemo.Wpf/GridView.xaml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<UserControl x:Class="MaterialDesignColors.WpfExample.GridView"
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:local="clr-namespace:MaterialDesignColors.WpfExample"
7+
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
8+
mc:Ignorable="d"
9+
d:DesignHeight="300" d:DesignWidth="500">
10+
<Grid>
11+
<Grid.RowDefinitions>
12+
<RowDefinition Height="Auto" />
13+
<RowDefinition Height="100*" />
14+
</Grid.RowDefinitions>
15+
<TextBlock HorizontalAlignment="Center" Text="Change the window width to see the wrapping of the items." Margin="0,8" />
16+
<ListBox Grid.Row="1" Style="{StaticResource MaterialDesignGridView}" ItemsSource="{Binding Path= Items}" Margin="150,0">
17+
<ListBox.ItemTemplate>
18+
<DataTemplate>
19+
<Grid Height="60" Width="100">
20+
<Grid.RowDefinitions>
21+
<RowDefinition Height="100*" />
22+
<RowDefinition Height="25" />
23+
</Grid.RowDefinitions>
24+
<Viewbox Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center">
25+
<Canvas Width="24" Height="24">
26+
<Path Data="{Binding Path=PathData}" Fill="{StaticResource PrimaryHueMidBrush}" />
27+
</Canvas>
28+
</Viewbox>
29+
<TextBlock Grid.Row="1" HorizontalAlignment="Center" Text="{Binding Path=Description}" VerticalAlignment="Center" />
30+
</Grid>
31+
</DataTemplate>
32+
</ListBox.ItemTemplate>
33+
</ListBox>
34+
</Grid>
35+
</UserControl>

‎MainDemo.Wpf/GridView.xaml.cs

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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.Media;
12+
using System.Windows.Media.Imaging;
13+
using System.Windows.Navigation;
14+
using System.Windows.Shapes;
15+
16+
namespace MaterialDesignColors.WpfExample
17+
{
18+
public partial class GridView : UserControl
19+
{
20+
public GridView()
21+
{
22+
InitializeComponent();
23+
}
24+
}
25+
}

‎MainDemo.Wpf/MainDemo.Wpf.csproj

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,17 @@
8080
</Compile>
8181
<Compile Include="Domain\AnotherCommandImplementation.cs" />
8282
<Compile Include="Domain\DemoItem.cs" />
83+
<Compile Include="Domain\GridViewItemViewModel.cs" />
84+
<Compile Include="Domain\GridViewViewModel.cs" />
8385
<Compile Include="Domain\ListFieldsViewModel.cs" />
8486
<Compile Include="Domain\SelectableViewModel.cs" />
8587
<Compile Include="Domain\TextFieldsViewModel.cs" />
8688
<Compile Include="Grids.xaml.cs">
8789
<DependentUpon>Grids.xaml</DependentUpon>
8890
</Compile>
91+
<Compile Include="GridView.xaml.cs">
92+
<DependentUpon>GridView.xaml</DependentUpon>
93+
</Compile>
8994
<Compile Include="Home.xaml.cs">
9095
<DependentUpon>Home.xaml</DependentUpon>
9196
</Compile>
@@ -128,6 +133,10 @@
128133
<SubType>Designer</SubType>
129134
<Generator>MSBuild:Compile</Generator>
130135
</Page>
136+
<Page Include="GridView.xaml">
137+
<SubType>Designer</SubType>
138+
<Generator>MSBuild:Compile</Generator>
139+
</Page>
131140
<Page Include="Home.xaml">
132141
<SubType>Designer</SubType>
133142
<Generator>MSBuild:Compile</Generator>

‎MainDemo.Wpf/MainWindow.xaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,15 @@
8181
</wpfExample:Lists>
8282
</domain:DemoItem.Content>
8383
</domain:DemoItem>
84+
<domain:DemoItem Name="Grid view">
85+
<domain:DemoItem.Content>
86+
<wpfExample:GridView>
87+
<wpfExample:GridView.DataContext>
88+
<domain:GridViewViewModel />
89+
</wpfExample:GridView.DataContext>
90+
</wpfExample:GridView>
91+
</domain:DemoItem.Content>
92+
</domain:DemoItem>
8493
<domain:DemoItem Name="Trees">
8594
<domain:DemoItem.Content>
8695
<wpfExample:Trees />

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,10 @@
9696
<SubType>Designer</SubType>
9797
<Generator>MSBuild:Compile</Generator>
9898
</Page>
99+
<Page Include="Themes\MaterialDesignTheme.GridView.xaml">
100+
<SubType>Designer</SubType>
101+
<Generator>MSBuild:Compile</Generator>
102+
</Page>
99103
<Page Include="Themes\MaterialDesignTheme.Label.xaml">
100104
<SubType>Designer</SubType>
101105
<Generator>MSBuild:Compile</Generator>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.checkbox.xaml" />
1212
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.combobox.xaml" />
1313
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DataGrid.xaml" />
14-
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DatePicker.xaml" />
14+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DatePicker.xaml" />
15+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.GridView.xaml" />
1516
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.GridSplitter.xaml" />
1617
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.Label.xaml" />
1718
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.listbox.xaml" />

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.GridView.xaml

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3+
4+
<Style x:Key="MaterialDesignGridViewItem" TargetType="{x:Type ListBoxItem}">
5+
<Setter Property="Background" Value="Transparent" />
6+
<Setter Property="BorderThickness" Value="0"/>
7+
<Setter Property="Margin" Value="4" />
8+
<Setter Property="SnapsToDevicePixels" Value="True"/>
9+
<Setter Property="Template">
10+
<Setter.Value>
11+
<ControlTemplate TargetType="{x:Type ListBoxItem}">
12+
<ControlTemplate.Resources>
13+
<Storyboard x:Key="OnSelected">
14+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder" Storyboard.TargetProperty="Opacity">
15+
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="1">
16+
<EasingDoubleKeyFrame.EasingFunction>
17+
<CircleEase EasingMode="EaseOut" />
18+
</EasingDoubleKeyFrame.EasingFunction>
19+
</EasingDoubleKeyFrame>
20+
</DoubleAnimationUsingKeyFrames>
21+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="SelectedBorder">
22+
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
23+
</DoubleAnimationUsingKeyFrames>
24+
</Storyboard>
25+
<Storyboard x:Key="OnUnSelected">
26+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder" Storyboard.TargetProperty="Opacity">
27+
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0">
28+
<EasingDoubleKeyFrame.EasingFunction>
29+
<CircleEase EasingMode="EaseOut" />
30+
</EasingDoubleKeyFrame.EasingFunction>
31+
</EasingDoubleKeyFrame>
32+
</DoubleAnimationUsingKeyFrames>
33+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="SelectedBorder">
34+
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
35+
</DoubleAnimationUsingKeyFrames>
36+
</Storyboard>
37+
</ControlTemplate.Resources>
38+
<Grid Background="Transparent">
39+
<Border x:Name="MouseOverBorder" />
40+
<Border x:Name="SelectedBorder" Background="{DynamicResource MaterialDesignFlatButtonClick}" Opacity="0" RenderTransformOrigin="0.5,0.5">
41+
<Border.RenderTransform>
42+
<TransformGroup>
43+
<ScaleTransform ScaleX="0"/>
44+
<SkewTransform/>
45+
<RotateTransform/>
46+
<TranslateTransform/>
47+
</TransformGroup>
48+
</Border.RenderTransform>
49+
</Border>
50+
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="2"
51+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
52+
</Grid>
53+
<ControlTemplate.Triggers>
54+
<Trigger Property="IsSelected" Value="True">
55+
<Trigger.EnterActions>
56+
<BeginStoryboard Storyboard="{StaticResource OnSelected}" />
57+
</Trigger.EnterActions>
58+
<Trigger.ExitActions>
59+
<BeginStoryboard Storyboard="{StaticResource OnUnSelected}" />
60+
</Trigger.ExitActions>
61+
</Trigger>
62+
<MultiTrigger>
63+
<MultiTrigger.Conditions>
64+
<Condition Property="IsSelected" Value="False"/>
65+
<Condition Property="IsMouseOver" Value="True"/>
66+
</MultiTrigger.Conditions>
67+
<Setter Property="Background" TargetName="MouseOverBorder" Value="{DynamicResource MaterialDesignDivider}"/>
68+
</MultiTrigger>
69+
</ControlTemplate.Triggers>
70+
</ControlTemplate>
71+
</Setter.Value>
72+
</Setter>
73+
</Style>
74+
75+
<!-- special template for a ListBox to layout the items in columns and rows -->
76+
<Style x:Key="MaterialDesignGridView" TargetType="{x:Type ListBox}">
77+
<Setter Property="Background" Value="Transparent"/>
78+
<Setter Property="BorderBrush" Value="Transparent"/>
79+
<Setter Property="BorderThickness" Value="0"/>
80+
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}"/>
81+
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
82+
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
83+
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
84+
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
85+
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
86+
<Setter Property="ItemsPanel">
87+
<Setter.Value>
88+
<ItemsPanelTemplate>
89+
<WrapPanel HorizontalAlignment="Center" IsItemsHost="True" Orientation="Horizontal" VerticalAlignment="Top" />
90+
</ItemsPanelTemplate>
91+
</Setter.Value>
92+
</Setter>
93+
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignGridViewItem}" />
94+
</Style>
95+
96+
</ResourceDictionary>

0 commit comments

Comments
 (0)