Skip to content

Commit

Permalink
Merge pull request CommunityToolkit#355 from CommunityToolkit/niels90…
Browse files Browse the repository at this point in the history 
…01/gallery-ux-improvements

[Gallery] UI tweaks
  • Loading branch information
@michael-hawker
michael-hawker authored Jan 12, 2023
2 parents 3efe3f3 + 9ff6a7e commit 5c5dd57
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 115 deletions.
2 changes: 1 addition & 1 deletion CommunityToolkit.Labs.Shared/Pages/Shell.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<Page x:Class="CommunityToolkit.Labs.Shared.Pages.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Expand Down
261 changes: 154 additions & 107 deletions CommunityToolkit.Labs.Shared/Renderers/ToolkitSampleRenderer.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<Page x:Class="CommunityToolkit.Labs.Shared.Renderers.ToolkitSampleRenderer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Expand All @@ -21,14 +21,12 @@
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="PageControl.MaxHeight" Value="400" />
<Setter Target="PageControl.MaxHeight" Value="600" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tabbed">
<VisualState.Setters>
<Setter Target="ToolBar.DefaultLabelPosition" Value="Right" />
<Setter Target="CodeBtn.Visibility" Value="Collapsed" />
<Setter Target="SeperatorLine.Visibility" Value="Collapsed" />
<Setter Target="SourcecodeExpander.Visibility" Value="Collapsed" />
<Setter Target="SampleCard.BorderThickness" Value="0" />
<Setter Target="SampleCard.CornerRadius" Value="0" />
Expand All @@ -38,22 +36,33 @@
</VisualStateGroup>

<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="HorizontalSampleLayout">
<VisualState x:Name="DefaultLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint1008Plus}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="VerticalSampleLayout">
<VisualState x:Name="VerticalLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint641Plus}" />
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="OptionsPanel.(Grid.Row)" Value="1" />
<Setter Target="OptionsPanel.(Grid.Column)" Value="0" />
<Setter Target="ToolBar.(Grid.Row)" Value="1" />
<Setter Target="OptionsPanel.BorderThickness" Value="0,1,0,0" />
<Setter Target="FixedOptionsBar.BorderThickness" Value="0" />
<Setter Target="ThemeBG.CornerRadius" Value="0" />
<Setter Target="PageControl.Padding" Value="16,16,16,32" />
<Setter Target="ThemeBtn.(Grid.Row)" Value="0" />
<Setter Target="FlowDirectionBtn.(Grid.Row)" Value="0" />
<Setter Target="CodeBtn.(Grid.Row)" Value="0" />
<Setter Target="ThemeBtn.(Grid.Column)" Value="0" />
<Setter Target="FlowDirectionBtn.(Grid.Column)" Value="1" />
<Setter Target="CodeBtn.(Grid.Column)" Value="2" />
<Setter Target="CodePivot.Margin" Value="6,0,8,0" />
<Setter Target="FixedOptionsBar.ColumnSpacing" Value="8" />
<Setter Target="FixedOptionsBar.RowSpacing" Value="0" />
<Setter Target="FixedOptionsBar.Margin" Value="12" />

</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand All @@ -68,6 +77,7 @@
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
Expand All @@ -77,119 +87,156 @@
<Grid x:Name="OptionsPanel"
Grid.Column="1"
VerticalAlignment="Stretch"
Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
Background="{ThemeResource LayerFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CommandBar x:Name="ToolBar"
DefaultLabelPosition="Collapsed"
OverflowButtonVisibility="Collapsed">
<!-- wasm:Visibility="Collapsed" -->
<AppBarButton x:Name="ThemeBtn"
Click="ThemeBtn_OnClick"
Label="Toggle theme"
Style="{StaticResource SmallAppBarButtonStyle}"
ToolTipService.ToolTip="Toggle theme">
<AppBarButton.Icon>
<FontIcon Glyph="&#xE793;" />
</AppBarButton.Icon>
</AppBarButton>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="OptionsScrollViewer"
Grid.Row="0"
Grid.Column="0"
MinWidth="256"
Padding="16">
<ContentControl x:Name="OptionsControl"
Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
</ScrollViewer>
<Grid x:Name="FixedOptionsBar"
Grid.Column="1"
Padding="4"
HorizontalAlignment="Right"
Background="{ThemeResource LayerFillColorAltBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1,0,0,0"
RowSpacing="8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="ThemeBtn"
Grid.Row="0"
Width="32"
Height="32"
Padding="4"
HorizontalAlignment="Center"
Click="ThemeBtn_OnClick"
Style="{StaticResource SubtleButtonStyle}"
ToolTipService.ToolTip="Toggle theme">
<Button.Content>
<FontIcon FontSize="16"
Glyph="&#xE793;" />
</Button.Content>
</Button>

<!-- wasm:Visibility="Collapsed" -->
<AppBarButton x:Name="FlowDirectionBtn"
Click="FlowDirectionBtn_OnClick"
Label="Toggle direction"
Style="{StaticResource SmallAppBarButtonStyle}"
ToolTipService.ToolTip="Toggle right-to-left">
<AppBarButton.Icon>
<FontIcon Glyph="&#xE1A0;" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarSeparator x:Name="SeperatorLine" />
<AppBarButton x:Name="CodeBtn"
Click="CodeBtn_OnClick"
Label="View code"
Style="{StaticResource SmallAppBarButtonStyle}"
ToolTipService.ToolTip="View code">
<AppBarButton.Icon>
<FontIcon Glyph="&#xE943;" />
</AppBarButton.Icon>
</AppBarButton>
<!-- TO DO: What URL to link to? -->
<!--<AppBarButton x:Name="GitHubBtn"
ToolTipService.ToolTip="View sample on GitHub"
Visibility="Collapsed"
Style="{StaticResource SmallAppBarButtonStyle}">
<AppBarButton.Icon>
<PathIcon Data="{StaticResource GithubIcon}" />
</AppBarButton.Icon>
</AppBarButton>-->
</CommandBar>
<Button x:Name="FlowDirectionBtn"
Grid.Row="1"
Width="32"
Height="32"
Padding="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
wasm:Visibility="Collapsed"
Click="FlowDirectionBtn_OnClick"
Style="{StaticResource SubtleButtonStyle}"
ToolTipService.ToolTip="Toggle right-to-left">

<Button.Content>
<FontIcon FontSize="16"
Glyph="&#xE1A0;" />
</Button.Content>
</Button>

<Rectangle Height="1"
VerticalAlignment="Bottom"
Fill="{ThemeResource CardStrokeColorDefaultBrush}" />
<ContentControl x:Name="OptionsControl"
Grid.Row="1"
MinWidth="240"
Margin="16"
HorizontalAlignment="Left"
Content="{x:Bind SampleOptionsPaneInstance, Mode=OneWay}" />
</Grid>
<Button x:Name="CodeBtn"
Grid.Row="2"
Width="32"
Height="32"
Padding="4"
HorizontalAlignment="Center"
Click="CodeBtn_OnClick"
Style="{StaticResource AccentButtonStyle}"
ToolTipService.ToolTip="View code">
<Button.Content>
<FontIcon FontSize="14"
Glyph="&#xE943;" />
</Button.Content>
</Button>
</Grid>

</Grid>

<Grid x:Name="ContentPageHolder">
<Grid x:Name="ContentPageHolder"
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}">
<!-- A solidbackground we enable when toggling themes. WinUI uses a lot of translucent brushes and might look weird -->
<Border x:Name="ThemeBG"
Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
CornerRadius="8,0,0,8"
Visibility="Collapsed" />
<ContentControl x:Name="PageControl"
Grid.Row="1"
Padding="16,16,32,16"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="{x:Bind SampleControlInstance, Mode=OneWay}" />
<ScrollViewer HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch">

<ContentControl x:Name="PageControl"
Margin="16"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Background="Yellow"
Content="{x:Bind SampleControlInstance, Mode=OneWay}" />
</ScrollViewer>
</Grid>
</Grid>

<muxc:Expander x:Name="SourcecodeExpander"
Grid.Row="2"
MinHeight="0"
Margin="0,-1,0,0"
Padding="16,0,16,0"
HorizontalAlignment="Stretch"
BorderThickness="0">
<muxc:Expander.Resources>
<x:Double x:Key="ExpanderChevronButtonSize">0</x:Double>
<Thickness x:Key="ExpanderHeaderBorderThickness">0</Thickness>
</muxc:Expander.Resources>
<Pivot MaxHeight="400"
HorizontalAlignment="Stretch">
<Pivot.Resources>
<x:Double x:Key="PivotHeaderItemFontSize">14</x:Double>
</Pivot.Resources>
<muxc:Expander x:Name="SourcecodeExpander"
Grid.Row="2"
Grid.ColumnSpan="3"
MinHeight="0"
Margin="0,-1,0,0"
Padding="0,0,0,0"
HorizontalAlignment="Stretch"
BorderBrush="Transparent"
BorderThickness="0,1,0,0"
CornerRadius="0,0,8,8">
<muxc:Expander.Resources>
<x:Double x:Key="ExpanderChevronButtonSize">0</x:Double>
<Thickness x:Key="ExpanderHeaderBorderThickness">0,0,0,0</Thickness>
<StaticResource x:Key="ExpanderContentBackground"
ResourceKey="LayerFillColorDefaultBrush" />
</muxc:Expander.Resources>
<Grid BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="0,1,0,0">
<Pivot x:Name="CodePivot"
MaxHeight="400"
Margin="16,0,16,0"
HorizontalAlignment="Stretch">
<Pivot.Resources>
<x:Double x:Key="PivotHeaderItemFontSize">14</x:Double>
</Pivot.Resources>

<PivotItem Header="XAML">
<ScrollViewer>
<TextBlock wasm:IsTextSelectionEnabled="True"
win:IsTextSelectionEnabled="True"
Text="{x:Bind XamlCode, Mode=OneWay}" />
</ScrollViewer>
</PivotItem>
<PivotItem Header="C#">
<ScrollViewer>
<TextBlock wasm:IsTextSelectionEnabled="True"
win:IsTextSelectionEnabled="True"
Text="{x:Bind CSharpCode, Mode=OneWay}" />
</ScrollViewer>
</PivotItem>
</Pivot>
</muxc:Expander>
<PivotItem Header="XAML">
<ScrollViewer>
<TextBlock wasm:IsTextSelectionEnabled="True"
win:IsTextSelectionEnabled="True"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind XamlCode, Mode=OneWay}" />
</ScrollViewer>
</PivotItem>
<PivotItem Header="C#">
<ScrollViewer>
<TextBlock wasm:IsTextSelectionEnabled="True"
win:IsTextSelectionEnabled="True"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind CSharpCode, Mode=OneWay}" />
</ScrollViewer>
</PivotItem>
</Pivot>
</Grid>
</muxc:Expander>
</Grid>
</Grid>
</Page>
7 changes: 5 additions & 2 deletions CommunityToolkit.Labs.Shared/Renderers/ToolkitSampleRenderer.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,13 +156,12 @@ private async Task LoadData()
CSharpCode = await GetMetadataFileContents(Metadata, "xaml.cs");

var sampleControlInstance = (UIElement)Metadata.SampleControlFactory();

// Custom control-based sample options.
if (Metadata.SampleOptionsPaneType is not null && Metadata.SampleOptionsPaneFactory is not null)
{
SampleOptionsPaneInstance = (UIElement)Metadata.SampleOptionsPaneFactory(sampleControlInstance);
}

// Source generater-based sample options
else if (sampleControlInstance is IToolkitSampleGeneratedOptionPropertyContainer propertyContainer)
{
Expand All @@ -175,6 +174,10 @@ private async Task LoadData()
SampleOptions = propertyContainer.GeneratedPropertyMetadata
};
}
else
{
OptionsScrollViewer.Visibility = Visibility.Collapsed;
}

// Generated options must be assigned before attempting to render the control,
// else some platforms will nullref from XAML but not properly ignore the exception when binding to generated properties.
Expand Down
6 changes: 1 addition & 5 deletions CommunityToolkit.Labs.Shared/Styles/Buttons.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,9 +348,5 @@
<!--<Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />-->
</Style>

<Style x:Key="SmallAppBarButtonStyle"
BasedOn="{StaticResource DefaultAppBarButtonStyle}"
TargetType="AppBarButton">
<Setter Property="Width" Value="36" />
</Style>

</ResourceDictionary>

0 comments on commit 5c5dd57

Please sign in to comment.