Skip to content

Commit

Permalink
Ran Xaml Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ProJend
ProJend committed Dec 26, 2024
1 parent f420b40 commit 70cde9a
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 45 deletions.
81 changes: 40 additions & 41 deletions components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,45 @@
<!-- 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="SettingsControlsExperiment.Samples.ContentAlignmentSettingsCardSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tk="using:CommunityToolkit.WinUI"
mc:Ignorable="d">
<!-- 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="SettingsControlsExperiment.Samples.ContentAlignmentSettingsCardSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tk="using:CommunityToolkit.WinUI"
mc:Ignorable="d">

<StackPanel Spacing="4">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="HorizontalReveredLayout">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Left_Column.Width" Value="*" />
<Setter Target="Right_Column.Width" Value="Auto" />
<Setter Target="AdditionalContent.Margin" Value="0,0,20,0" />
<Setter Target="AdditionalContent.(Grid.Column)" Value="0" />
<Setter Target="PressedContent.(Grid.Column)" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- The Breakpoint follow by SettingsCardWrapThreshold of ContentAlignment Horizontal -->
<tk:ControlSizeTrigger MaxWidth="900"
TargetElement="{Binding ElementName=settingsCard}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Left_Column.Width" Value="Auto" />
<Setter Target="Right_Column.Width" Value="*" />
<Setter Target="AdditionalContent.Margin" Value="20,0,0,0" />
<Setter Target="AdditionalContent.(Grid.Column)" Value="1" />
<Setter Target="PressedContent.(Grid.Column)" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<controls:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold."
Header="Adaptive layouts"
HeaderIcon="{tk:FontIcon Glyph=&#xE745;}"
Expand Down Expand Up @@ -87,36 +117,5 @@
<Button x:Name="PressedContent">Button</Button>
</Grid>
</controls:SettingsCard>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="HorizontalReveredLayout">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Left_Column.Width" Value="*" />
<Setter Target="Right_Column.Width" Value="Auto" />
<Setter Target="AdditionalContent.Margin" Value="0,0,20,0" />
<Setter Target="AdditionalContent.(Grid.Column)" Value="0" />
<Setter Target="PressedContent.(Grid.Column)" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- The Breakpoint follow by SettingsCardWrapThreshold of ContentAlignment Horizontal -->
<tk:ControlSizeTrigger MaxWidth="900"
TargetElement="{Binding ElementName=settingsCard}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Left_Column.Width" Value="Auto" />
<Setter Target="Right_Column.Width" Value="*" />
<Setter Target="AdditionalContent.Margin" Value="20,0,0,0" />
<Setter Target="AdditionalContent.(Grid.Column)" Value="1" />
<Setter Target="PressedContent.(Grid.Column)" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
</Page>
4 changes: 2 additions & 2 deletions components/SettingsControls/samples/SettingsExpanderSample.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="SettingsControlsExperiment.Samples.SettingsExpanderSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Expand Down Expand Up @@ -28,7 +28,7 @@
</local:SettingsCard>
<local:SettingsCard Header="A ToggleSwitch attach TextBox">
<StackPanel Orientation="Horizontal">
<ToggleSwitch x:Name="toggleSwitch"/>
<ToggleSwitch x:Name="toggleSwitch" />
<TextBox MinWidth="100"
Margin="30,5,0,5"
IsEnabled="{Binding IsOn, ElementName=toggleSwitch}"
Expand Down
6 changes: 4 additions & 2 deletions components/SettingsControls/src/SettingsCard/SettingsCard.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,8 +200,10 @@
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="{ThemeResource SettingsCardLeftIndention}" />
<ColumnDefinition x:Name="COLUMN_HeaderPanel" Width="*" />
<ColumnDefinition x:Name="COLUMN_ContentPresenter" Width="Auto" />
<ColumnDefinition x:Name="COLUMN_HeaderPanel"
Width="*" />
<ColumnDefinition x:Name="COLUMN_ContentPresenter"
Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
Expand Down

0 comments on commit 70cde9a

Please sign in to comment.