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.

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
Changes from 1 commit
Commits
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 committed Dec 15, 2024
commit 80fa31bbca73549d15fd641c6f92f4650bf3b3f5
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