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

add sample page for VariableSizedWrapGrid #573

Merged
merged 2 commits into from
Jul 3, 2023
Merged

add sample page for VariableSizedWrapGrid #573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a06035f
add sample page for VariableSizedWrapGrid
riccikl Oct 31, 2022
dc9d8fe
Merge branch 'master' into sample-variablesizedwrapgrid
MartinZikmund Jun 29, 2023
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
7 changes: 7 additions & 0 deletions Uno.Gallery/Uno.Gallery.UWP/Uno.Gallery.UWP.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,9 @@
<Compile Include="Views\NestedPages\NavigationBarSample_NestedPage2.xaml.cs">
<DependentUpon>NavigationBarSample_NestedPage2.xaml</DependentUpon>
</Compile>
<Compile Include="Views\SamplePages\VariableSizedWrapGridSamplePage.xaml.cs">
<DependentUpon>VariableSizedWrapGridSamplePage.xaml</DependentUpon>
</Compile>
<Compile Include="Views\SamplePages\BreadcrumbBarSamplePage.xaml.cs">
<DependentUpon>BreadcrumbBarSamplePage.xaml</DependentUpon>
</Compile>
Expand Down Expand Up @@ -598,6 +601,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Views\SamplePages\VariableSizedWrapGridSamplePage.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="Views\SamplePages\BreadcrumbBarSamplePage.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
Expand Down
87 changes: 87 additions & 0 deletions Uno.Gallery/Uno.Gallery.UWP/Views/SamplePages/VariableSizedWrapGridSamplePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<Page x:Class="Uno.Gallery.Views.Samples.VariableSizedWrapGridSamplePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.Gallery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:smtx="using:ShowMeTheXAML"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:SamplePageLayout>
<local:SamplePageLayout.FluentTemplate>
<DataTemplate>
<StackPanel>

<smtx:XamlDisplay UniqueKey="VariableSizedWrapGridSamplePage_Fluent_Simple"
smtx:XamlDisplayExtensions.Header="A simple VariableSizedWrapGrid">

<VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
<Rectangle Fill="{StaticResource UnoBlueColorBrush}"/>
<Rectangle Fill="{StaticResource UnoRedColorBrush}" Height="80" VariableSizedWrapGrid.RowSpan="2"/>
<Rectangle Fill="{StaticResource UnoGreenColorBrush}" Width="80" VariableSizedWrapGrid.ColumnSpan="2"/>
<Rectangle Fill="{StaticResource UnoPurpleColorBrush}" Height="80" Width="80" VariableSizedWrapGrid.RowSpan="2" VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="VariableSizedWrapGridSamplePage_Fluent_Vertical"
smtx:XamlDisplayExtensions.Header="Vertical orientation wrapping after three rows">

<VariableSizedWrapGrid Orientation="Vertical" ItemHeight="44" ItemWidth="44" MaximumRowsOrColumns="3">
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoBlueColorBrush}"/>
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoRedColorBrush}"/>
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoGreenColorBrush}"/>
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoPurpleColorBrush}"/>
</VariableSizedWrapGrid>

</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="VariableSizedWrapGridSamplePage_Fluent_Horizontal"
smtx:XamlDisplayExtensions.Header="Horizontal orientation wrapping after three columns">


<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="44" ItemWidth="44" MaximumRowsOrColumns="3">
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoBlueColorBrush}"/>
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoRedColorBrush}"/>
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoGreenColorBrush}"/>
<Rectangle Width="40" Height="40" Fill="{StaticResource UnoPurpleColorBrush}"/>
</VariableSizedWrapGrid>

</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="VariableSizedWrapGridSamplePage_Fluent_Wrap"
smtx:XamlDisplayExtensions.Header="Interactive example with variable width">

<RelativePanel>
<VariableSizedWrapGrid x:Name="varGrid" Width="100"
Background="{StaticResource SampleSecondBackgroundBrush}"
Orientation="Horizontal" ItemWidth="40" ItemHeight="40">

<Rectangle Margin="2" Fill="{StaticResource UnoBlueColorBrush}"/>
<Rectangle Margin="2" Fill="{StaticResource UnoRedColorBrush}" VariableSizedWrapGrid.ColumnSpan="2" />
<Rectangle Margin="2" Fill="{StaticResource UnoGreenColorBrush}"/>
<Rectangle Margin="2" Fill="{StaticResource UnoPurpleColorBrush}" VariableSizedWrapGrid.RowSpan="2" />
<Rectangle Margin="2" Fill="{StaticResource UnoBlueColorBrush}" VariableSizedWrapGrid.ColumnSpan="2" />
<Rectangle Margin="2" Fill="{StaticResource UnoRedColorBrush}"/>
<Rectangle Margin="2" Fill="{StaticResource UnoGreenColorBrush}"/>
<Rectangle Margin="2" Fill="{StaticResource UnoPurpleColorBrush}"/>
</VariableSizedWrapGrid>

<!-- Controls -->
<StackPanel RelativePanel.AlignRightWithPanel="True">
<muxc:NumberBox Header="Grid width"
Value="{Binding Width, ElementName=varGrid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Minimum="50" Maximum="600" SmallChange="10" SpinButtonPlacementMode="Compact" />
</StackPanel>
</RelativePanel>

</smtx:XamlDisplay>

</StackPanel>
</DataTemplate>
</local:SamplePageLayout.FluentTemplate>
</local:SamplePageLayout>
</Grid>
</Page>
31 changes: 31 additions & 0 deletions Uno.Gallery/Uno.Gallery.UWP/Views/SamplePages/VariableSizedWrapGridSamplePage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
using System.ComponentModel;
using Windows.UI.Xaml.Controls;

namespace Uno.Gallery.Views.Samples
{
[SamplePage(SampleCategory.UIComponents, "VariableSizedWrapGrid", Description = "Provides a grid-style layout panel where each tile/cell can be variable size based on content.", DocumentationLink = "https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.variablesizedwrapgrid")]
public sealed partial class VariableSizedWrapGridSamplePage : Page
{
public VariableSizedWrapGridSamplePage()
{
InitializeComponent();
DataContext = new VariableSizedWrapGridViewModel();
}

public class VariableSizedWrapGridViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

private int _width;
public int Width
{
get => _width;
set
{
_width = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Width)));
}
}
}
}
}