Skip to content

Commit

Permalink
Add MIT license
Browse files Browse the repository at this point in the history
  • Loading branch information
@ProJend
ProJend committed Dec 15, 2024
1 parent c679e4a commit 80fa31b
Showing 1 changed file with 45 additions and 50 deletions.
95 changes: 45 additions & 50 deletions components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
View file
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

0 comments on commit 80fa31b

Please sign in to comment.