Skip to content

Add new property ContentAlignment.Horizontal for SettingsCard #582

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

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Add new property ContentAlignment.Horizontal for SettingsCard #582

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
8c5d9e7
Make content fully stretch the available area
ProJend Dec 1, 2024
176ac15
Add 'VisualState' for stretching Content
ProJend Dec 3, 2024
7969f5a
Add 'MaxWidth' target to wrap header
ProJend Dec 3, 2024
791ab3a
Add property Horizontal ContentAlignment to SettingsCard
ProJend Dec 4, 2024
a1a3a63
Add sample SettingsCard with Horizontal ContentAlignment
ProJend Dec 4, 2024
14d9821
Simplify RightAlignedCompactToggleSwitchStyle
ProJend Dec 8, 2024
6039592
Merge branch 'main' into betterSettingsControls
niels9001 Dec 8, 2024
082620f
Add sample for SettingsCard.ContentAlignment property
ProJend Dec 10, 2024
2501590
Add more SettingsCard in SettingsExpander
ProJend Dec 10, 2024
c48ee77
Merge branch 'CommunityToolkit:main' into betterSettingsControls
ProJend Dec 10, 2024
0ab99b3
Revert "Simplify RightAlignedCompactToggleSwitchStyle"
ProJend Dec 12, 2024
c679e4a
Fix crash on setting WrapThreshold in SettingsCard
ProJend Dec 14, 2024
80fa31b
Add MIT license
ProJend Dec 15, 2024
f05799a
Merge branch 'main' into betterSettingsControls
Arlodotexe Dec 21, 2024
f420b40
Merge branch 'main' into betterSettingsControls
ProJend Dec 26, 2024
70cde9a
Ran Xaml Styling
ProJend Dec 26, 2024
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
Prev Previous commit
Next Next commit
Add MIT license
  • Loading branch information
@ProJend
ProJend committed Dec 15, 2024
commit 80fa31bbca73549d15fd641c6f92f4650bf3b3f5
95 changes: 45 additions & 50 deletions components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +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. -->
<Page
x:Class="SettingsControlsExperiment.Samples.ContentAlignmentSettingsCardSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Expand All @@ -9,66 +10,61 @@
mc:Ignorable="d">

<StackPanel Spacing="4">
<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;}"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<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;}"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<controls:SettingsCard.Resources>
<x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
<x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
</controls:SettingsCard.Resources>
<Button Content="This control will wrap vertically!" Style="{StaticResource AccentButtonStyle}" />
<Button Content="This control will wrap vertically!"
Style="{StaticResource AccentButtonStyle}" />
</controls:SettingsCard>

<controls:SettingsCard ContentAlignment="Left" IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<controls:SettingsCard ContentAlignment="Left"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
</controls:SettingsCard>

<controls:SettingsCard
HorizontalContentAlignment="Left"
ContentAlignment="Vertical"
Description="You can align your content vertically. Make sure to set the HorizontalContentAlignment to Left when you do!"
Header="Vertically aligned"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<controls:SettingsCard HorizontalContentAlignment="Left"
ContentAlignment="Vertical"
Description="You can align your content vertically. Make sure to set the HorizontalContentAlignment to Left when you do!"
Header="Vertically aligned"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<GridView SelectedIndex="1">
<GridViewItem>
<Border
Width="64"
Height="64"
Background="#0078D4"
CornerRadius="{ThemeResource ControlCornerRadius}" />
<Border Width="64"
Height="64"
Background="#0078D4"
CornerRadius="{ThemeResource ControlCornerRadius}" />
</GridViewItem>
<GridViewItem>
<Border
Width="64"
Height="64"
Background="#005EB7"
CornerRadius="{ThemeResource ControlCornerRadius}" />
<Border Width="64"
Height="64"
Background="#005EB7"
CornerRadius="{ThemeResource ControlCornerRadius}" />
</GridViewItem>
<GridViewItem>
<Border
Width="64"
Height="64"
Background="#003D92"
CornerRadius="{ThemeResource ControlCornerRadius}" />
<Border Width="64"
Height="64"
Background="#003D92"
CornerRadius="{ThemeResource ControlCornerRadius}" />
</GridViewItem>
<GridViewItem>
<Border
Width="64"
Height="64"
Background="#001968"
CornerRadius="{ThemeResource ControlCornerRadius}" />
<Border Width="64"
Height="64"
Background="#001968"
CornerRadius="{ThemeResource ControlCornerRadius}" />
</GridViewItem>
</GridView>
</controls:SettingsCard>

<controls:SettingsCard
x:Name="settingsCard"
ContentAlignment="Horizontal"
Description="You can also align your content horizontally. Additional image will stretch to middle. You still can override this breakpoint by setting both SettingsCardWrapThreshold and additional SettingsCardHeaderPanelMaxWidth resoure to wrap vertically."
Header="Horizontally aligned"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<controls:SettingsCard x:Name="settingsCard"
ContentAlignment="Horizontal"
Description="You can also align your content horizontally. Additional image will stretch to middle. You still can override this breakpoint by setting both SettingsCardWrapThreshold and additional SettingsCardHeaderPanelMaxWidth resoure to wrap vertically."
Header="Horizontally aligned"
IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
<controls:SettingsCard.Resources>
<x:Double x:Key="SettingsCardHeaderPanelMaxWidth">550</x:Double>
<x:Double x:Key="SettingsCardContentPresenterMinWidth">0</x:Double>
Expand All @@ -80,15 +76,13 @@
<ColumnDefinition x:Name="Left_Column" />
<ColumnDefinition x:Name="Right_Column" />
</Grid.ColumnDefinitions>
<Grid
x:Name="AdditionalContent"
MaxHeight="100"
Background="Pink"
CornerRadius="{ThemeResource ControlCornerRadius}">
<Image
VerticalAlignment="Center"
Source="/Assets/SplashScreen.png"
Stretch="UniformToFill" />
<Grid x:Name="AdditionalContent"
MaxHeight="100"
Background="Pink"
CornerRadius="{ThemeResource ControlCornerRadius}">
<Image VerticalAlignment="Center"
Source="/Assets/SplashScreen.png"
Stretch="UniformToFill" />
</Grid>
<Button x:Name="PressedContent">Button</Button>
</Grid>
Expand All @@ -110,8 +104,9 @@
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- The Breakpoint follow by SettingsCardWrapThreshold of ContentAlignment Horizontal -->
<tk:ControlSizeTrigger MaxWidth="900" TargetElement="{Binding ElementName=settingsCard}" />
<!-- 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" />
Expand Down