Bind to view model
MODIFY
WalletWasabi.Fluent/Views/ResponsivePanelDemo/ResponsivePanelDemoView.axaml
WalletWasabi.Fluent/Views/ResponsivePanelDemo/ResponsivePanelDemoView.axaml
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:c="using:WalletWasabi.Fluent.Controls"
- mc:Ignorable="d" d:DesignWidth="732" d:DesignHeight="650"
+ xmlns:vm="using:WalletWasabi.Fluent.ViewModels.ResponsivePanelDemo"
+ mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="850"
x:Class="WalletWasabi.Fluent.Views.ResponsivePanelDemo.ResponsivePanelDemoView">
-
+ <UserControl.DataContext>
+ <vm:ResponsivePanelDemoViewModel/>
+ </UserControl.DataContext>
<DockPanel>
+ <StackPanel DockPanel.Dock="Left" Width="200" Margin="12">
+ <Label Content="ItemWidth"/>
+ <TextBox Text="{Binding ItemWidth}"/>
+ <Label Content="ItemHeight"/>
+ <TextBox Text="{Binding ItemHeight}"/>
+ <Label Content="WidthSource"/>
+ <TextBox Text="{Binding WidthSource}"/>
+ <Label Content="AspectRatio"/>
+ <TextBox Text="{Binding AspectRatio}"/>
+ <Label Content="ColumnHints"/>
+ <TextBox Text="{Binding ColumnHints}"/>
+ <Label Content="WidthTriggers"/>
+ <TextBox Text="{Binding WidthTriggers}"/>
+ </StackPanel>
+
<!-- For adaptive height set RowDefinitions="Auto,*" and AspectRatio="0.5" -->
<!-- For fixed height set RowDefinitions="350,*" and AspectRatio="NaN" -->
<!-- When ItemWidth and ItemHeight are NaN AspectRatio and ColumnHints is using for sizing items -->
<Grid RowDefinitions="402,*">
<c:ResponsivePanel Grid.Row="0"
- AspectRatio="NaN"
- ItemWidth="228"
- ItemHeight="126"
- ColumnHints="1, 2, 3, 4"
- WidthTriggers="228, 456, 684, 912"
+ ItemWidth="{Binding ItemWidth}"
+ ItemHeight="{Binding ItemHeight}"
+ WidthSource="{Binding WidthSource}"
+ AspectRatio="{Binding AspectRatio}"
+ ColumnHints="{Binding ColumnHints}"
+ WidthTriggers="{Binding WidthTriggers}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
UseLayoutRounding="False"

Bind to view model