├── .gitattributes
├── ResponsiveDEMOS.csproj
├── App.xaml.cs
├── App.xaml
├── AssemblyInfo.cs
├── MainWindow.xaml.cs
├── Controls
    └── MediaQuery
    │   ├── Lists
    │       ├── List.xaml.cs
    │       ├── ListItem.xaml.cs
    │       ├── ListItem.xaml
    │       └── List.xaml
    │   ├── Views
    │       ├── AdaptiveView.xaml.cs
    │       └── AdaptiveView.xaml
    │   └── Navigation
    │       ├── TopNavigation.xaml.cs
    │       ├── NavigationPanel.xaml.cs
    │       ├── TopNavigation.xaml
    │       └── NavigationPanel.xaml
├── Converters
    └── BreakpointConverter.cs
├── MainWindow.xaml
├── README.md
└── .gitignore


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/ResponsiveDEMOS.csproj:
--------------------------------------------------------------------------------
 1 | <Project Sdk="Microsoft.NET.Sdk">
 2 | 
 3 |   <PropertyGroup>
 4 |     <OutputType>WinExe</OutputType>
 5 |     <TargetFramework>net5.0-windows</TargetFramework>
 6 |     <UseWPF>true</UseWPF>
 7 |   </PropertyGroup>
 8 | 
 9 |   <ItemGroup>
10 |     <Folder Include="Controls\MediaQuery\Views\Layouts\" />
11 |   </ItemGroup>
12 | 
13 | </Project>
14 | 


--------------------------------------------------------------------------------
/App.xaml.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Configuration;
 4 | using System.Data;
 5 | using System.Linq;
 6 | using System.Threading.Tasks;
 7 | using System.Windows;
 8 | 
 9 | namespace ResponsiveDEMOS
10 | {
11 |     /// <summary>
12 |     /// Interaction logic for App.xaml
13 |     /// </summary>
14 |     public partial class App : Application
15 |     {
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/App.xaml:
--------------------------------------------------------------------------------
 1 | <Application
 2 |     x:Class="ResponsiveDEMOS.App"
 3 |     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4 |     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5 |     xmlns:converters="clr-namespace:ResponsiveDEMOS.Converters"
 6 |     xmlns:local="clr-namespace:ResponsiveDEMOS"
 7 |     StartupUri="MainWindow.xaml">
 8 |     <Application.Resources>
 9 |         <converters:BreakpointConverter x:Key="BreakpointConverter" />
10 |     </Application.Resources>
11 | </Application>
12 | 


--------------------------------------------------------------------------------
/AssemblyInfo.cs:
--------------------------------------------------------------------------------
 1 | using System.Windows;
 2 | 
 3 | [assembly: ThemeInfo(
 4 |     ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
 5 |                                      //(used if a resource is not found in the page,
 6 |                                      // or application resource dictionaries)
 7 |     ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
 8 |                                               //(used if a resource is not found in the page,
 9 |                                               // app, or any theme specific resource dictionaries)
10 | )]
11 | 


--------------------------------------------------------------------------------
/MainWindow.xaml.cs:
--------------------------------------------------------------------------------
 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 ResponsiveDEMOS
17 | {
18 |     /// <summary>
19 |     /// Interaction logic for MainWindow.xaml
20 |     /// </summary>
21 |     public partial class MainWindow : Window
22 |     {
23 |         public MainWindow()
24 |         {
25 |             InitializeComponent();
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Lists/List.xaml.cs:
--------------------------------------------------------------------------------
 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 ResponsiveDEMOS.Controls.MediaQuery.Lists
17 | {
18 |     /// <summary>
19 |     /// Logika interakcji dla klasy List.xaml
20 |     /// </summary>
21 |     public partial class List : UserControl
22 |     {
23 |         public List()
24 |         {
25 |             InitializeComponent();
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Lists/ListItem.xaml.cs:
--------------------------------------------------------------------------------
 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 ResponsiveDEMOS.Controls.MediaQuery.Lists
17 | {
18 |     /// <summary>
19 |     /// Logika interakcji dla klasy ListItem.xaml
20 |     /// </summary>
21 |     public partial class ListItem : UserControl
22 |     {
23 |         public ListItem()
24 |         {
25 |             InitializeComponent();
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Views/AdaptiveView.xaml.cs:
--------------------------------------------------------------------------------
 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 ResponsiveDEMOS.Controls.MediaQuery.Views
17 | {
18 |     /// <summary>
19 |     /// Logika interakcji dla klasy AdaptiveView.xaml
20 |     /// </summary>
21 |     public partial class AdaptiveView : UserControl
22 |     {
23 |         public AdaptiveView()
24 |         {
25 |             InitializeComponent();
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Navigation/TopNavigation.xaml.cs:
--------------------------------------------------------------------------------
 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 ResponsiveDEMOS.Controls.MediaQuery.Navigation
17 | {
18 |     /// <summary>
19 |     /// Logika interakcji dla klasy TopNavigation.xaml
20 |     /// </summary>
21 |     public partial class TopNavigation : UserControl
22 |     {
23 |         public TopNavigation()
24 |         {
25 |             InitializeComponent();
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Navigation/NavigationPanel.xaml.cs:
--------------------------------------------------------------------------------
 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 ResponsiveDEMOS.Controls.MediaQuery.Navigation
17 | {
18 |     /// <summary>
19 |     /// Logika interakcji dla klasy NavigationPanel.xaml
20 |     /// </summary>
21 |     public partial class NavigationPanel : UserControl
22 |     {
23 |         public NavigationPanel()
24 |         {
25 |             InitializeComponent();
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/Converters/BreakpointConverter.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Globalization;
 4 | using System.Linq;
 5 | using System.Text;
 6 | using System.Threading.Tasks;
 7 | using System.Windows.Data;
 8 | 
 9 | namespace ResponsiveDEMOS.Converters
10 | {
11 |     public class BreakpointConverter : IValueConverter
12 |     {
13 |         /// <summary>
14 |         /// 
15 |         /// </summary>
16 |         /// <param name="value">Actual Height/Width</param>
17 |         /// <param name="targetType"></param>
18 |         /// <param name="parameter">Breakpoint</param>
19 |         /// <param name="culture"></param>
20 |         /// <returns></returns>
21 |         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
22 |         {
23 |             double actual = (double)value;
24 |             int breakpoint = int.Parse(parameter.ToString());
25 | 
26 |             return actual < breakpoint;
27 |         }
28 | 
29 |         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
30 |         {
31 |             throw new NotImplementedException();
32 |         }
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Navigation/TopNavigation.xaml:
--------------------------------------------------------------------------------
 1 | <UserControl
 2 |     x:Class="ResponsiveDEMOS.Controls.MediaQuery.Navigation.TopNavigation"
 3 |     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4 |     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5 |     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6 |     xmlns:local="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Navigation"
 7 |     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8 |     d:DesignHeight="100"
 9 |     d:DesignWidth="400"
10 |     FontSize="20"
11 |     mc:Ignorable="d">
12 |     <Grid Background="Black">
13 |         <Grid.ColumnDefinitions>
14 |             <ColumnDefinition Width="*" />
15 |             <ColumnDefinition Width="auto" />
16 |         </Grid.ColumnDefinitions>
17 | 
18 |         <TextBlock
19 |             Margin="20,0,0,0"
20 |             VerticalAlignment="Center"
21 |             Foreground="White"
22 |             Text="SOME LOGO" />
23 | 
24 |         <TextBlock
25 |             Grid.Column="1"
26 |             Margin="0,0,30,0"
27 |             VerticalAlignment="Center"
28 |             Foreground="White"
29 |             Text="H" />
30 | 
31 |     </Grid>
32 | </UserControl>
33 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Navigation/NavigationPanel.xaml:
--------------------------------------------------------------------------------
 1 | <UserControl
 2 |     x:Class="ResponsiveDEMOS.Controls.MediaQuery.Navigation.NavigationPanel"
 3 |     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4 |     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5 |     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6 |     xmlns:local="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Navigation"
 7 |     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8 |     d:DesignHeight="600"
 9 |     d:DesignWidth="300"
10 |     FontSize="20"
11 |     Foreground="White"
12 |     mc:Ignorable="d">
13 |     <StackPanel Background="Black">
14 |         <TextBlock
15 |             Margin="0,15,0,0"
16 |             Text="Some Logo"
17 |             TextAlignment="Center" />
18 |         <TextBlock
19 |             Margin="0,35,0,0"
20 |             FontSize="15"
21 |             Text="Option 1"
22 |             TextAlignment="Center" />
23 |         <TextBlock
24 |             Margin="0,15,0,0"
25 |             FontSize="15"
26 |             Text="Option 2"
27 |             TextAlignment="Center" />
28 |         <TextBlock
29 |             Margin="0,15,0,0"
30 |             FontSize="15"
31 |             Text="Option 3"
32 |             TextAlignment="Center" />
33 |     </StackPanel>
34 | </UserControl>
35 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Lists/ListItem.xaml:
--------------------------------------------------------------------------------
 1 | <UserControl
 2 |     x:Class="ResponsiveDEMOS.Controls.MediaQuery.Lists.ListItem"
 3 |     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4 |     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5 |     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6 |     xmlns:local="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Lists"
 7 |     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8 |     d:DesignHeight="60"
 9 |     d:DesignWidth="800"
10 |     mc:Ignorable="d">
11 |     <Grid>
12 |         <Grid.ColumnDefinitions>
13 |             <ColumnDefinition Width="auto" />
14 |             <ColumnDefinition Width="9*" />
15 |             <ColumnDefinition Width="4*" />
16 |         </Grid.ColumnDefinitions>
17 | 
18 |         <Border
19 |             Grid.Column="0"
20 |             MinWidth="100"
21 |             Margin="5,0"
22 |             Background="Black"
23 |             BorderBrush="Black"
24 |             BorderThickness="1" />
25 | 
26 |         <Border
27 |             Grid.Column="1"
28 |             Margin="5,0"
29 |             Background="Black"
30 |             BorderBrush="Black"
31 |             BorderThickness="1" />
32 | 
33 |         <Border
34 |             Grid.Column="2"
35 |             Margin="5,0"
36 |             Background="Black"
37 |             BorderBrush="Black"
38 |             BorderThickness="1" />
39 |     </Grid>
40 | </UserControl>
41 | 


--------------------------------------------------------------------------------
/MainWindow.xaml:
--------------------------------------------------------------------------------
 1 | <Window
 2 |     x:Class="ResponsiveDEMOS.MainWindow"
 3 |     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4 |     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5 |     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6 |     xmlns:local="clr-namespace:ResponsiveDEMOS"
 7 |     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8 |     xmlns:navigation="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Navigation"
 9 |     xmlns:views="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Views"
10 |     Name="Window"
11 |     Title="MainWindow"
12 |     Width="800"
13 |     Height="450"
14 |     MinWidth="250"
15 |     mc:Ignorable="d">
16 |     <Window.Resources>
17 | 
18 |         <!--  LAYOUTS  -->
19 | 
20 |         <DataTemplate x:Key="BigScreen">
21 |             <Grid>
22 |                 <Grid.ColumnDefinitions>
23 |                     <ColumnDefinition Width="auto" />
24 |                     <ColumnDefinition Width="*" />
25 |                 </Grid.ColumnDefinitions>
26 | 
27 |                 <navigation:NavigationPanel Width="150" />
28 |                 <views:AdaptiveView Grid.Column="1" />
29 |             </Grid>
30 |         </DataTemplate>
31 | 
32 |         <DataTemplate x:Key="SmallScreen">
33 |             <Grid>
34 |                 <Grid.RowDefinitions>
35 |                     <RowDefinition Height="auto" />
36 |                     <RowDefinition Height="*" />
37 |                 </Grid.RowDefinitions>
38 | 
39 |                 <navigation:TopNavigation Height="70" />
40 |                 <views:AdaptiveView Grid.Row="1" />
41 |             </Grid>
42 |         </DataTemplate>
43 | 
44 |     </Window.Resources>
45 | 
46 |     <Window.Style>
47 |         <Style TargetType="ContentControl">
48 |             <Setter Property="ContentTemplate" Value="{StaticResource BigScreen}" />
49 |             <Style.Triggers>
50 |                 <DataTrigger Binding="{Binding ActualWidth, ElementName=Window, Converter={StaticResource BreakpointConverter}, ConverterParameter=500}" Value="True">
51 |                     <Setter Property="ContentTemplate" Value="{StaticResource SmallScreen}" />
52 |                 </DataTrigger>
53 |             </Style.Triggers>
54 |         </Style>
55 |     </Window.Style>
56 | 
57 | </Window>
58 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Lists/List.xaml:
--------------------------------------------------------------------------------
 1 | <UserControl
 2 |     x:Class="ResponsiveDEMOS.Controls.MediaQuery.Lists.List"
 3 |     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4 |     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5 |     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6 |     xmlns:local="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Lists"
 7 |     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8 |     Height="auto"
 9 |     d:DesignWidth="800"
10 |     mc:Ignorable="d">
11 |     <UserControl.Resources>
12 | 
13 |         <DataTemplate x:Key="BigList">
14 |             <ScrollViewer VerticalScrollBarVisibility="Auto">
15 |                 <StackPanel Background="LightGray">
16 |                     <local:ListItem Height="30" Margin="0,10" />
17 |                     <local:ListItem Height="30" Margin="0,10" />
18 |                     <local:ListItem Height="30" Margin="0,10" />
19 |                     <local:ListItem Height="30" Margin="0,10" />
20 |                     <local:ListItem Height="30" Margin="0,10" />
21 |                 </StackPanel>
22 |             </ScrollViewer>
23 |         </DataTemplate>
24 | 
25 |         <DataTemplate x:Key="SmallList">
26 |             <ScrollViewer VerticalScrollBarVisibility="Auto">
27 |                 <StackPanel Background="LightGray">
28 |                     <local:ListItem Height="20" Margin="0,2" />
29 |                     <local:ListItem Height="20" Margin="0,2" />
30 |                     <local:ListItem Height="20" Margin="0,2" />
31 |                     <local:ListItem Height="20" Margin="0,2" />
32 |                     <local:ListItem Height="20" Margin="0,2" />
33 |                 </StackPanel>
34 |             </ScrollViewer>
35 |         </DataTemplate>
36 | 
37 |     </UserControl.Resources>
38 |     <UserControl.Style>
39 |         <Style TargetType="ContentControl">
40 |             <Setter Property="ContentTemplate" Value="{StaticResource BigList}" />
41 |             <Style.Triggers>
42 |                 <DataTrigger Binding="{Binding ActualWidth, RelativeSource={RelativeSource Self}, Converter={StaticResource BreakpointConverter}, ConverterParameter=250}" Value="True">
43 |                     <Setter Property="ContentTemplate" Value="{StaticResource SmallList}" />
44 |                 </DataTrigger>
45 |             </Style.Triggers>
46 | 
47 |         </Style>
48 |     </UserControl.Style>
49 | </UserControl>
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # WPF adaptive design
  2 |  Adaptive design to WPF - my aproach to changing WPF App layout according to Window's size using DataTriggers and Styles.
  3 | 
  4 | # How does it look?
  5 | 
  6 | ![wpf-adaptive-layout](https://user-images.githubusercontent.com/27814917/145099461-d3a792f5-48ea-4531-9726-a6a80add5d20.gif)
  7 | 
  8 | # How it works? Step by step 
  9 | 
 10 | ## First things first 
 11 | Main idea is to write DataTemplates (whole Layouts) and according to Window's (or UserControl's) size (ActualWidth for example) change them in runtime. 
 12 | 
 13 | ## Setup DataTemplate
 14 | First, we need to dive in code of UI element which we want to make adaptive. Next, in Resources we need to specify our DataTemplates:
 15 | 
 16 | ```xaml
 17 | <UserControl.Resources>
 18 | 
 19 |     <DataTemplate x:Key="BigList">
 20 |         <!-- LAYOUT FOR BIG LIST  -->
 21 |         <ScrollViewer VerticalScrollBarVisibility="Auto">
 22 |             <StackPanel Background="LightGray">
 23 |                 <local:ListItem Height="30" Margin="0,10" />
 24 |                 <local:ListItem Height="30" Margin="0,10" />
 25 |                 <local:ListItem Height="30" Margin="0,10" />
 26 |                 <local:ListItem Height="30" Margin="0,10" />
 27 |                 <local:ListItem Height="30" Margin="0,10" />
 28 |             </StackPanel>
 29 |         </ScrollViewer>
 30 |     </DataTemplate>
 31 | 
 32 |     <DataTemplate x:Key="SmallList">
 33 |         <!-- LAYOUT FOR SMALL LIST  -->
 34 |         <ScrollViewer VerticalScrollBarVisibility="Auto">
 35 |             <StackPanel Background="LightGray">
 36 |                 <local:ListItem Height="20" Margin="0,2" />
 37 |                 <local:ListItem Height="20" Margin="0,2" />
 38 |                 <local:ListItem Height="20" Margin="0,2" />
 39 |                 <local:ListItem Height="20" Margin="0,2" />
 40 |                 <local:ListItem Height="20" Margin="0,2" />
 41 |             </StackPanel>
 42 |         </ScrollViewer>
 43 |     </DataTemplate>
 44 | 
 45 | </UserControl.Resources>
 46 | ```
 47 | 
 48 | As you can see, DataTemplate is just our layout.
 49 | 
 50 | ## Setup Converter
 51 | In your project we need custom ValueConverter, to check if our ActualWidth (or Height) is smaller, than breakpoint. You can write your own converter (for example, if you want to check if ActualWidth is GREATER than breakpoint, instead of checking if it's smaller), or use this:
 52 | 
 53 | ```c#
 54 | public class BreakpointConverter : IValueConverter
 55 | {
 56 |     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
 57 |     {
 58 |         double actual = (double)value;
 59 |         int breakpoint = int.Parse(parameter.ToString());
 60 | 
 61 |         return actual < breakpoint;
 62 |     }
 63 | 
 64 |     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
 65 |     {
 66 |         throw new NotImplementedException();
 67 |     }
 68 | }
 69 | ```
 70 | 
 71 | And... don't forget to add your Converter as a Resource!
 72 | ```xaml
 73 | <Application.Resources>
 74 |     <converters:BreakpointConverter x:Key="BreakpointConverter" />
 75 | </Application.Resources>
 76 | ```
 77 | 
 78 | ## Setup Style
 79 | So, we have our Layouts (DataTemplates) and converter... now it's time to use them!
 80 | 
 81 | We need style in your adaptive control, which TargetType will be "ContentControl". In Setter with property ContentTemplate we can set default layout. 
 82 | 
 83 | ```xaml
 84 | <UserControl.Style>
 85 |     <Style TargetType="ContentControl">
 86 |         <Setter Property="ContentTemplate" Value="{StaticResource BigList}" />
 87 |         <Style.Triggers>
 88 |             <DataTrigger Binding="{Binding ActualWidth, RelativeSource={RelativeSource Self}, Converter={StaticResource BreakpointConverter}, ConverterParameter=250}" Value="True">
 89 |                 <Setter Property="ContentTemplate" Value="{StaticResource SmallList}" />
 90 |             </DataTrigger>
 91 |         </Style.Triggers>
 92 | 
 93 |     </Style>
 94 | </UserControl.Style>
 95 | ```
 96 | 
 97 | In Style Triggers we need to specify DataTriggers (something like media queries in CSS). As you can see, in our Trigger we have:
 98 | - Binding to ActualWidth - Property which we want to check
 99 | - RelativeSource Self - Property telling, that Setters in this Trigger will affect this control ("self")
100 | - our Converter
101 | - ConverterParameter - Property which is our breakpoint
102 | 
103 | If you use converter from this repo, this wole code is just checking if Binding Property is smaller than ConverterParameter. If it is, in Setter we set ContentTemplate of our Control to SmallList layout (DataTemplate).
104 | 
105 | This isn't of course whole code for layout from gif, but I hope it'll show you, how to implement something like this to your own app. If you want to see other DataTemplates (or generally, code of this demo), feel free to dive into this repo ;3
106 | 
107 | # Sources
108 | [Stackoverflow question, which inspired me quite a lot ;pp](https://stackoverflow.com/questions/14013959/how-can-i-create-an-adaptive-layout-in-wpf#comment19354884_14013959)
109 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | ## Ignore Visual Studio temporary files, build results, and
  2 | ## files generated by popular Visual Studio add-ons.
  3 | ##
  4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
  5 | 
  6 | # User-specific files
  7 | *.rsuser
  8 | *.suo
  9 | *.user
 10 | *.userosscache
 11 | *.sln.docstates
 12 | 
 13 | # User-specific files (MonoDevelop/Xamarin Studio)
 14 | *.userprefs
 15 | 
 16 | # Build results
 17 | [Dd]ebug/
 18 | [Dd]ebugPublic/
 19 | [Rr]elease/
 20 | [Rr]eleases/
 21 | x64/
 22 | x86/
 23 | bld/
 24 | [Bb]in/
 25 | [Oo]bj/
 26 | [Ll]og/
 27 | 
 28 | # Visual Studio 2015/2017 cache/options directory
 29 | .vs/
 30 | # Uncomment if you have tasks that create the project's static files in wwwroot
 31 | #wwwroot/
 32 | 
 33 | # Visual Studio 2017 auto generated files
 34 | Generated\ Files/
 35 | 
 36 | # MSTest test Results
 37 | [Tt]est[Rr]esult*/
 38 | [Bb]uild[Ll]og.*
 39 | 
 40 | # NUNIT
 41 | *.VisualState.xml
 42 | TestResult.xml
 43 | 
 44 | # Build Results of an ATL Project
 45 | [Dd]ebugPS/
 46 | [Rr]eleasePS/
 47 | dlldata.c
 48 | 
 49 | # Benchmark Results
 50 | BenchmarkDotNet.Artifacts/
 51 | 
 52 | # .NET Core
 53 | project.lock.json
 54 | project.fragment.lock.json
 55 | artifacts/
 56 | 
 57 | # StyleCop
 58 | StyleCopReport.xml
 59 | 
 60 | # Files built by Visual Studio
 61 | *_i.c
 62 | *_p.c
 63 | *_h.h
 64 | *.ilk
 65 | *.meta
 66 | *.obj
 67 | *.iobj
 68 | *.pch
 69 | *.pdb
 70 | *.ipdb
 71 | *.pgc
 72 | *.pgd
 73 | *.rsp
 74 | *.sbr
 75 | *.tlb
 76 | *.tli
 77 | *.tlh
 78 | *.tmp
 79 | *.tmp_proj
 80 | *_wpftmp.csproj
 81 | *.log
 82 | *.vspscc
 83 | *.vssscc
 84 | .builds
 85 | *.pidb
 86 | *.svclog
 87 | *.scc
 88 | 
 89 | # Chutzpah Test files
 90 | _Chutzpah*
 91 | 
 92 | # Visual C++ cache files
 93 | ipch/
 94 | *.aps
 95 | *.ncb
 96 | *.opendb
 97 | *.opensdf
 98 | *.sdf
 99 | *.cachefile
100 | *.VC.db
101 | *.VC.VC.opendb
102 | 
103 | # Visual Studio profiler
104 | *.psess
105 | *.vsp
106 | *.vspx
107 | *.sap
108 | 
109 | # Visual Studio Trace Files
110 | *.e2e
111 | 
112 | # TFS 2012 Local Workspace
113 | $tf/
114 | 
115 | # Guidance Automation Toolkit
116 | *.gpState
117 | 
118 | # ReSharper is a .NET coding add-in
119 | _ReSharper*/
120 | *.[Rr]e[Ss]harper
121 | *.DotSettings.user
122 | 
123 | # JustCode is a .NET coding add-in
124 | .JustCode
125 | 
126 | # TeamCity is a build add-in
127 | _TeamCity*
128 | 
129 | # DotCover is a Code Coverage Tool
130 | *.dotCover
131 | 
132 | # AxoCover is a Code Coverage Tool
133 | .axoCover/*
134 | !.axoCover/settings.json
135 | 
136 | # Visual Studio code coverage results
137 | *.coverage
138 | *.coveragexml
139 | 
140 | # NCrunch
141 | _NCrunch_*
142 | .*crunch*.local.xml
143 | nCrunchTemp_*
144 | 
145 | # MightyMoose
146 | *.mm.*
147 | AutoTest.Net/
148 | 
149 | # Web workbench (sass)
150 | .sass-cache/
151 | 
152 | # Installshield output folder
153 | [Ee]xpress/
154 | 
155 | # DocProject is a documentation generator add-in
156 | DocProject/buildhelp/
157 | DocProject/Help/*.HxT
158 | DocProject/Help/*.HxC
159 | DocProject/Help/*.hhc
160 | DocProject/Help/*.hhk
161 | DocProject/Help/*.hhp
162 | DocProject/Help/Html2
163 | DocProject/Help/html
164 | 
165 | # Click-Once directory
166 | publish/
167 | 
168 | # Publish Web Output
169 | *.[Pp]ublish.xml
170 | *.azurePubxml
171 | # Note: Comment the next line if you want to checkin your web deploy settings,
172 | # but database connection strings (with potential passwords) will be unencrypted
173 | *.pubxml
174 | *.publishproj
175 | 
176 | # Microsoft Azure Web App publish settings. Comment the next line if you want to
177 | # checkin your Azure Web App publish settings, but sensitive information contained
178 | # in these scripts will be unencrypted
179 | PublishScripts/
180 | 
181 | # NuGet Packages
182 | *.nupkg
183 | # The packages folder can be ignored because of Package Restore
184 | **/[Pp]ackages/*
185 | # except build/, which is used as an MSBuild target.
186 | !**/[Pp]ackages/build/
187 | # Uncomment if necessary however generally it will be regenerated when needed
188 | #!**/[Pp]ackages/repositories.config
189 | # NuGet v3's project.json files produces more ignorable files
190 | *.nuget.props
191 | *.nuget.targets
192 | 
193 | # Microsoft Azure Build Output
194 | csx/
195 | *.build.csdef
196 | 
197 | # Microsoft Azure Emulator
198 | ecf/
199 | rcf/
200 | 
201 | # Windows Store app package directories and files
202 | AppPackages/
203 | BundleArtifacts/
204 | Package.StoreAssociation.xml
205 | _pkginfo.txt
206 | *.appx
207 | 
208 | # Visual Studio cache files
209 | # files ending in .cache can be ignored
210 | *.[Cc]ache
211 | # but keep track of directories ending in .cache
212 | !*.[Cc]ache/
213 | 
214 | # Others
215 | ClientBin/
216 | ~$*
217 | *~
218 | *.dbmdl
219 | *.dbproj.schemaview
220 | *.jfm
221 | *.pfx
222 | *.publishsettings
223 | orleans.codegen.cs
224 | 
225 | # Including strong name files can present a security risk
226 | # (https://github.com/github/gitignore/pull/2483#issue-259490424)
227 | #*.snk
228 | 
229 | # Since there are multiple workflows, uncomment next line to ignore bower_components
230 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
231 | #bower_components/
232 | 
233 | # RIA/Silverlight projects
234 | Generated_Code/
235 | 
236 | # Backup & report files from converting an old project file
237 | # to a newer Visual Studio version. Backup files are not needed,
238 | # because we have git ;-)
239 | _UpgradeReport_Files/
240 | Backup*/
241 | UpgradeLog*.XML
242 | UpgradeLog*.htm
243 | ServiceFabricBackup/
244 | *.rptproj.bak
245 | 
246 | # SQL Server files
247 | *.mdf
248 | *.ldf
249 | *.ndf
250 | 
251 | # Business Intelligence projects
252 | *.rdl.data
253 | *.bim.layout
254 | *.bim_*.settings
255 | *.rptproj.rsuser
256 | 
257 | # Microsoft Fakes
258 | FakesAssemblies/
259 | 
260 | # GhostDoc plugin setting file
261 | *.GhostDoc.xml
262 | 
263 | # Node.js Tools for Visual Studio
264 | .ntvs_analysis.dat
265 | node_modules/
266 | 
267 | # Visual Studio 6 build log
268 | *.plg
269 | 
270 | # Visual Studio 6 workspace options file
271 | *.opt
272 | 
273 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
274 | *.vbw
275 | 
276 | # Visual Studio LightSwitch build output
277 | **/*.HTMLClient/GeneratedArtifacts
278 | **/*.DesktopClient/GeneratedArtifacts
279 | **/*.DesktopClient/ModelManifest.xml
280 | **/*.Server/GeneratedArtifacts
281 | **/*.Server/ModelManifest.xml
282 | _Pvt_Extensions
283 | 
284 | # Paket dependency manager
285 | .paket/paket.exe
286 | paket-files/
287 | 
288 | # FAKE - F# Make
289 | .fake/
290 | 
291 | # JetBrains Rider
292 | .idea/
293 | *.sln.iml
294 | 
295 | # CodeRush personal settings
296 | .cr/personal
297 | 
298 | # Python Tools for Visual Studio (PTVS)
299 | __pycache__/
300 | *.pyc
301 | 
302 | # Cake - Uncomment if you are using it
303 | # tools/**
304 | # !tools/packages.config
305 | 
306 | # Tabs Studio
307 | *.tss
308 | 
309 | # Telerik's JustMock configuration file
310 | *.jmconfig
311 | 
312 | # BizTalk build output
313 | *.btp.cs
314 | *.btm.cs
315 | *.odx.cs
316 | *.xsd.cs
317 | 
318 | # OpenCover UI analysis results
319 | OpenCover/
320 | 
321 | # Azure Stream Analytics local run output
322 | ASALocalRun/
323 | 
324 | # MSBuild Binary and Structured Log
325 | *.binlog
326 | 
327 | # NVidia Nsight GPU debugger configuration file
328 | *.nvuser
329 | 
330 | # MFractors (Xamarin productivity tool) working folder
331 | .mfractor/
332 | 
333 | # Local History for Visual Studio
334 | .localhistory/
335 | 


--------------------------------------------------------------------------------
/Controls/MediaQuery/Views/AdaptiveView.xaml:
--------------------------------------------------------------------------------
  1 | <UserControl
  2 |     x:Class="ResponsiveDEMOS.Controls.MediaQuery.Views.AdaptiveView"
  3 |     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4 |     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5 |     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6 |     xmlns:lists="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Lists"
  7 |     xmlns:local="clr-namespace:ResponsiveDEMOS.Controls.MediaQuery.Views"
  8 |     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9 |     Name="View"
 10 |     d:DesignHeight="450"
 11 |     d:DesignWidth="240"
 12 |     FontSize="15"
 13 |     mc:Ignorable="d">
 14 |     <UserControl.Resources>
 15 | 
 16 |         <!--  LAYOUTS  -->
 17 | 
 18 |         <DataTemplate x:Key="BigScreen">
 19 |             <Grid Background="White">
 20 |                 <Grid.ColumnDefinitions>
 21 |                     <ColumnDefinition Width="*" />
 22 |                     <ColumnDefinition Width="auto" />
 23 |                     <ColumnDefinition Width="auto" />
 24 |                     <ColumnDefinition Width="6*" />
 25 |                     <ColumnDefinition Width="auto" />
 26 |                     <ColumnDefinition Width="auto" />
 27 |                     <ColumnDefinition Width="*" />
 28 |                 </Grid.ColumnDefinitions>
 29 |                 <Grid.RowDefinitions>
 30 |                     <RowDefinition Height="auto" />
 31 |                     <RowDefinition Height="auto" />
 32 |                     <RowDefinition Height="auto" />
 33 |                     <RowDefinition Height="auto" />
 34 |                     <RowDefinition Height="*" />
 35 |                     <RowDefinition Height="*" />
 36 |                 </Grid.RowDefinitions>
 37 | 
 38 |                 <TextBlock
 39 |                     Grid.Row="0"
 40 |                     Grid.Column="0"
 41 |                     Grid.ColumnSpan="6"
 42 |                     Margin="15,5,0,10"
 43 |                     FontSize="20"
 44 |                     Text="ViewModel:" />
 45 | 
 46 |                 <!--  FIRST NAME  -->
 47 | 
 48 |                 <TextBlock
 49 |                     Grid.Row="1"
 50 |                     Grid.Column="1"
 51 |                     Margin="5,0"
 52 |                     VerticalAlignment="Center"
 53 |                     Text="First Name:" />
 54 | 
 55 |                 <TextBox
 56 |                     Grid.Row="1"
 57 |                     Grid.Column="2"
 58 |                     Width="100"
 59 |                     Margin="5" />
 60 | 
 61 |                 <!--  LAST NAME  -->
 62 | 
 63 |                 <TextBlock
 64 |                     Grid.Row="1"
 65 |                     Grid.Column="4"
 66 |                     Margin="5,0"
 67 |                     VerticalAlignment="Center"
 68 |                     Text="Last Name:" />
 69 | 
 70 |                 <TextBox
 71 |                     Grid.Row="1"
 72 |                     Grid.Column="5"
 73 |                     Width="100"
 74 |                     Margin="5" />
 75 | 
 76 |                 <!--  PASSWORD  -->
 77 | 
 78 |                 <TextBlock
 79 |                     Grid.Row="2"
 80 |                     Grid.Column="1"
 81 |                     Margin="5,0"
 82 |                     VerticalAlignment="Center"
 83 |                     Text="Password:" />
 84 | 
 85 |                 <TextBox
 86 |                     Grid.Row="2"
 87 |                     Grid.Column="2"
 88 |                     Width="100"
 89 |                     Margin="5" />
 90 | 
 91 |                 <!--  LIST  -->
 92 | 
 93 |                 <TextBlock
 94 |                     Grid.Row="3"
 95 |                     Grid.Column="1"
 96 |                     Grid.ColumnSpan="2"
 97 |                     Margin="5,20,5,10"
 98 |                     VerticalAlignment="Center"
 99 |                     Text="Some List:" />
100 | 
101 |                 <lists:List
102 |                     Grid.Row="4"
103 |                     Grid.Column="1"
104 |                     Grid.ColumnSpan="5"
105 |                     HorizontalAlignment="Stretch"
106 |                     VerticalAlignment="Top" />
107 | 
108 |                 <!--  BUTTONS  -->
109 | 
110 |                 <TextBlock
111 |                     Grid.Row="5"
112 |                     Grid.Column="1"
113 |                     Grid.ColumnSpan="2"
114 |                     Width="150"
115 |                     Height="50"
116 |                     Margin="0,10"
117 |                     HorizontalAlignment="Left"
118 |                     VerticalAlignment="Bottom"
119 |                     Background="LightGray"
120 |                     Text="Button 1"
121 |                     TextAlignment="Center" />
122 | 
123 |                 <TextBlock
124 |                     Grid.Row="5"
125 |                     Grid.Column="4"
126 |                     Grid.ColumnSpan="2"
127 |                     Width="150"
128 |                     Height="50"
129 |                     Margin="0,10"
130 |                     HorizontalAlignment="Right"
131 |                     VerticalAlignment="Bottom"
132 |                     Background="LightGray"
133 |                     Text="Button 2"
134 |                     TextAlignment="Center" />
135 | 
136 |             </Grid>
137 |         </DataTemplate>
138 | 
139 |         <DataTemplate x:Key="SmallScreen">
140 |             <Grid Background="White">
141 |                 <Grid.ColumnDefinitions>
142 |                     <ColumnDefinition Width="*" />
143 |                     <ColumnDefinition Width="auto" />
144 |                     <ColumnDefinition Width="auto" />
145 |                     <ColumnDefinition Width="*" />
146 |                     <ColumnDefinition Width="auto" />
147 |                     <ColumnDefinition Width="auto" />
148 |                     <ColumnDefinition Width="*" />
149 |                 </Grid.ColumnDefinitions>
150 |                 <Grid.RowDefinitions>
151 |                     <RowDefinition Height="auto" />
152 |                     <RowDefinition Height="auto" />
153 |                     <RowDefinition Height="auto" />
154 |                     <RowDefinition Height="auto" />
155 |                     <RowDefinition Height="auto" />
156 |                     <RowDefinition Height="*" />
157 |                     <RowDefinition Height="*" />
158 |                 </Grid.RowDefinitions>
159 | 
160 |                 <TextBlock
161 |                     Grid.Row="0"
162 |                     Grid.Column="0"
163 |                     Grid.ColumnSpan="6"
164 |                     Margin="15,5,0,10"
165 |                     FontSize="20"
166 |                     Text="ViewModel:" />
167 | 
168 |                 <!--  FIRST NAME  -->
169 | 
170 |                 <TextBlock
171 |                     Grid.Row="1"
172 |                     Grid.Column="1"
173 |                     Margin="5,0"
174 |                     VerticalAlignment="Center"
175 |                     Text="First Name:" />
176 | 
177 |                 <TextBox
178 |                     Grid.Row="1"
179 |                     Grid.Column="2"
180 |                     Width="100"
181 |                     Margin="5" />
182 | 
183 |                 <!--  LAST NAME  -->
184 | 
185 |                 <TextBlock
186 |                     Grid.Row="2"
187 |                     Grid.Column="1"
188 |                     Margin="5,0"
189 |                     VerticalAlignment="Center"
190 |                     Text="Last Name:" />
191 | 
192 |                 <TextBox
193 |                     Grid.Row="2"
194 |                     Grid.Column="2"
195 |                     Width="100"
196 |                     Margin="5" />
197 | 
198 |                 <!--  PASSWORD  -->
199 | 
200 |                 <TextBlock
201 |                     Grid.Row="3"
202 |                     Grid.Column="1"
203 |                     Margin="5,0"
204 |                     VerticalAlignment="Center"
205 |                     Text="Password:" />
206 | 
207 |                 <TextBox
208 |                     Grid.Row="3"
209 |                     Grid.Column="2"
210 |                     Width="100"
211 |                     Margin="5" />
212 | 
213 |                 <!--  LIST  -->
214 | 
215 |                 <TextBlock
216 |                     Grid.Row="4"
217 |                     Grid.Column="1"
218 |                     Grid.ColumnSpan="2"
219 |                     Margin="5,20,5,10"
220 |                     VerticalAlignment="Center"
221 |                     Text="Some List:" />
222 | 
223 |                 <lists:List
224 |                     Grid.Row="5"
225 |                     Grid.Column="1"
226 |                     Grid.ColumnSpan="5"
227 |                     HorizontalAlignment="Stretch"
228 |                     VerticalAlignment="Top" />
229 | 
230 |                 <!--  BUTTONS  -->
231 | 
232 |                 <TextBlock
233 |                     Grid.Row="6"
234 |                     Grid.Column="1"
235 |                     Grid.ColumnSpan="2"
236 |                     Width="150"
237 |                     Height="50"
238 |                     Margin="0,10"
239 |                     HorizontalAlignment="Left"
240 |                     VerticalAlignment="Bottom"
241 |                     Background="LightGray"
242 |                     Text="Button 1"
243 |                     TextAlignment="Center" />
244 | 
245 |                 <TextBlock
246 |                     Grid.Row="6"
247 |                     Grid.Column="4"
248 |                     Grid.ColumnSpan="2"
249 |                     Width="150"
250 |                     Height="50"
251 |                     Margin="0,10"
252 |                     HorizontalAlignment="Right"
253 |                     VerticalAlignment="Bottom"
254 |                     Background="LightGray"
255 |                     Text="Button 2"
256 |                     TextAlignment="Center" />
257 | 
258 |             </Grid>
259 |         </DataTemplate>
260 | 
261 |         <DataTemplate x:Key="SuperSmallScreen">
262 |             <ScrollViewer HorizontalScrollBarVisibility="Auto">
263 |                 <Grid Background="White">
264 |                     <Grid.ColumnDefinitions>
265 |                         <ColumnDefinition Width="*" />
266 |                         <ColumnDefinition Width="auto" />
267 |                         <ColumnDefinition Width="auto" />
268 |                         <ColumnDefinition Width="*" />
269 |                     </Grid.ColumnDefinitions>
270 |                     <Grid.RowDefinitions>
271 |                         <RowDefinition Height="auto" />
272 |                         <RowDefinition Height="auto" />
273 |                         <RowDefinition Height="auto" />
274 |                         <RowDefinition Height="auto" />
275 |                         <RowDefinition Height="auto" />
276 |                         <RowDefinition Height="auto" />
277 |                         <RowDefinition Height="auto" />
278 |                         <RowDefinition Height="auto" />
279 |                     </Grid.RowDefinitions>
280 | 
281 |                     <TextBlock
282 |                         Grid.Row="0"
283 |                         Grid.Column="0"
284 |                         Grid.ColumnSpan="6"
285 |                         Margin="15,5,0,10"
286 |                         FontSize="20"
287 |                         Text="ViewModel:" />
288 | 
289 |                     <!--  FIRST NAME  -->
290 | 
291 |                     <TextBlock
292 |                         Grid.Row="1"
293 |                         Grid.Column="1"
294 |                         Margin="5,0"
295 |                         VerticalAlignment="Center"
296 |                         Text="First Name:" />
297 | 
298 |                     <TextBox
299 |                         Grid.Row="1"
300 |                         Grid.Column="2"
301 |                         Width="100"
302 |                         Margin="5" />
303 | 
304 |                     <!--  LAST NAME  -->
305 | 
306 |                     <TextBlock
307 |                         Grid.Row="2"
308 |                         Grid.Column="1"
309 |                         Margin="5,0"
310 |                         VerticalAlignment="Center"
311 |                         Text="Last Name:" />
312 | 
313 |                     <TextBox
314 |                         Grid.Row="2"
315 |                         Grid.Column="2"
316 |                         Width="100"
317 |                         Margin="5" />
318 | 
319 |                     <!--  PASSWORD  -->
320 | 
321 |                     <TextBlock
322 |                         Grid.Row="3"
323 |                         Grid.Column="1"
324 |                         Margin="5,0"
325 |                         VerticalAlignment="Center"
326 |                         Text="Password:" />
327 | 
328 |                     <TextBox
329 |                         Grid.Row="3"
330 |                         Grid.Column="2"
331 |                         Width="100"
332 |                         Margin="5" />
333 | 
334 |                     <!--  LIST  -->
335 | 
336 |                     <TextBlock
337 |                         Grid.Row="4"
338 |                         Grid.Column="1"
339 |                         Grid.ColumnSpan="2"
340 |                         Margin="5,20,5,10"
341 |                         VerticalAlignment="Center"
342 |                         Text="Some List:" />
343 | 
344 |                     <lists:List
345 |                         Grid.Row="5"
346 |                         Grid.Column="1"
347 |                         Grid.ColumnSpan="2"
348 |                         Height="50" />
349 | 
350 |                     <!--  BUTTONS  -->
351 | 
352 |                     <TextBlock
353 |                         Grid.Row="6"
354 |                         Grid.Column="1"
355 |                         Grid.ColumnSpan="2"
356 |                         Width="150"
357 |                         Height="50"
358 |                         Margin="0,10"
359 |                         HorizontalAlignment="Center"
360 |                         VerticalAlignment="Bottom"
361 |                         Background="LightGray"
362 |                         Text="Button 1"
363 |                         TextAlignment="Center" />
364 | 
365 |                     <TextBlock
366 |                         Grid.Row="7"
367 |                         Grid.Column="1"
368 |                         Grid.ColumnSpan="2"
369 |                         Width="150"
370 |                         Height="50"
371 |                         Margin="0,10"
372 |                         HorizontalAlignment="Center"
373 |                         VerticalAlignment="Bottom"
374 |                         Background="LightGray"
375 |                         Text="Button 2"
376 |                         TextAlignment="Center" />
377 | 
378 |                 </Grid>
379 |             </ScrollViewer>
380 |         </DataTemplate>
381 |     </UserControl.Resources>
382 | 
383 |     <UserControl.Style>
384 |         <Style TargetType="ContentControl">
385 |             <Setter Property="ContentTemplate" Value="{StaticResource BigScreen}" />
386 |             <Style.Triggers>
387 |                 <DataTrigger Binding="{Binding ActualWidth, RelativeSource={RelativeSource Self}, Converter={StaticResource BreakpointConverter}, ConverterParameter=450}" Value="True">
388 |                     <Setter Property="ContentTemplate" Value="{StaticResource SmallScreen}" />
389 |                 </DataTrigger>
390 |                 <DataTrigger Binding="{Binding ActualWidth, RelativeSource={RelativeSource Self}, Converter={StaticResource BreakpointConverter}, ConverterParameter=325}" Value="True">
391 |                     <Setter Property="ContentTemplate" Value="{StaticResource SuperSmallScreen}" />
392 |                 </DataTrigger>
393 |             </Style.Triggers>
394 |         </Style>
395 |     </UserControl.Style>
396 | 
397 | </UserControl>
398 | 


--------------------------------------------------------------------------------