Skip to content

Commit

Permalink
Full example for SettingsCard
Browse files Browse the repository at this point in the history
  • Loading branch information
@NotYoojun
NotYoojun committed Dec 22, 2024
1 parent f2c9ca9 commit ece9c6d
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 14 deletions.
66 changes: 56 additions & 10 deletions source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Community/SettingsCardPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
<local:ControlExample.Example>
<ikw:SimpleStackPanel Spacing="4">
<ui:SettingsCard x:Name="settingsCard"
Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
Header="This is the Header"
IsEnabled="{Binding ElementName=EnableToggle1, Path=IsOn}">
Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
Header="This is the Header"
IsEnabled="{Binding ElementName=EnableToggle1, Path=IsOn}">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph="&#xE799;"/>
</ui:SettingsCard.HeaderIcon>
Expand All @@ -28,8 +28,8 @@
</ui:SettingsCard>

<ui:SettingsCard Description="You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon."
Header="Icon options"
IsEnabled="{Binding ElementName=EnableToggle1, Path=IsOn}">
Header="Icon options"
IsEnabled="{Binding ElementName=EnableToggle1, Path=IsOn}">
<ui:SettingsCard.HeaderIcon>
<Image Width="20" Height="20" Source="/Assets/WpfLibrary_256w.png"
RenderOptions.BitmapScalingMode="HighQuality"/>
Expand All @@ -42,8 +42,7 @@
<ui:SettingsCard.Description>
<ui:HyperlinkButton Content="Learn more about Inkways" />
</ui:SettingsCard.Description>
<Button Content="Open Inkways Editor"
Style="{StaticResource AccentButtonStyle}" />
<Button Content="Open Inkways Editor" Style="{StaticResource {x:Static ui:ThemeKeys.AccentButtonStyleKey}}" />
</ui:SettingsCard>

<ui: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."
Expand All @@ -53,8 +52,7 @@
<ui:FontIcon Glyph="&#xE745;"/>
</ui:SettingsCard.HeaderIcon>

<Button Content="This control will wrap vertically!"
Style="{StaticResource AccentButtonStyle}" />
<Button Content="This control will wrap vertically!"/>
</ui:SettingsCard>

<ui:SettingsCard Header="This is a card with a Header only"
Expand All @@ -65,7 +63,7 @@

<local:ControlExample.Options>
<StackPanel>
<ui:ToggleSwitch x:Name="EnableToggle1" Header="Is Enabled" IsOn="True"/>
<ui:ToggleSwitch x:Name="EnableToggle1" Header="Is Enabled" IsOn="True" Toggled="EnableToggle1_Toggled"/>
</StackPanel>
</local:ControlExample.Options>
</local:ControlExample>
Expand All @@ -80,5 +78,53 @@
to
<Run FontWeight="Bold">false</Run>.
</TextBlock>

<local:ControlExample x:Name="Example2" HeaderText="A Series of Clickable SettingsCards">
<local:ControlExample.Example>
<ikw:SimpleStackPanel Spacing="4">

<ui:SettingsCard Click="OnCardClicked"
Description="A SettingsCard can be made clickable and you can leverage the Command property or Click event."
Header="A clickable SettingsCard" IsClickEnabled="True"
IsEnabled="{Binding ElementName=EnableToggle2, Path=IsOn}">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph="&#xE799;"/>
</ui:SettingsCard.HeaderIcon>
<TextBlock Foreground="{DynamicResource {x:Static ui:ThemeKeys.TextFillColorSecondaryBrushKey}}"
Text="This is content" />
</ui:SettingsCard>

<ui:SettingsCard ActionIconToolTip="Open in new window"
Click="OnCardClicked" IsClickEnabled="True"
Description="You can customize the ActionIcon and ActionIconToolTip."
Header="Customizing the ActionIcon"
IsEnabled="{Binding ElementName=EnableToggle2, Path=IsOn}">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph="&#xE774;"/>
</ui:SettingsCard.HeaderIcon>
<ui:SettingsCard.ActionIcon>
<ui:FontIcon Glyph="&#xE8A7;"/>
</ui:SettingsCard.ActionIcon>
</ui:SettingsCard>

<ui:SettingsCard Click="OnCardClicked"
IsActionIconVisible="False" IsClickEnabled="True"
Header="Hiding the ActionIcon"
IsEnabled="{Binding ElementName=EnableToggle2, Path=IsOn}">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph="&#xE72E;"/>
</ui:SettingsCard.HeaderIcon>
</ui:SettingsCard>

</ikw:SimpleStackPanel>
</local:ControlExample.Example>

<local:ControlExample.Options>
<StackPanel>
<ui:ToggleSwitch x:Name="EnableToggle2" Header="Is Enabled" IsOn="True" Toggled="EnableToggle2_Toggled"/>
</StackPanel>
</local:ControlExample.Options>
</local:ControlExample>

</StackPanel>
</ui:Page>
113 changes: 109 additions & 4 deletions source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Community/SettingsCardPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
Expand All @@ -28,19 +29,123 @@ public SettingsCardPage()
InitializeComponent();
}

#region Example Code
private void Page_Loaded(object sender, RoutedEventArgs e)
{
UpdateExampleCode();
}

public void UpdateExampleCode()
private void EnableToggle1_Toggled(object sender, RoutedEventArgs e)
{
UpdateExampleCode();
}

private void EnableToggle2_Toggled(object sender, RoutedEventArgs e)
{
UpdateExampleCode();
}


#endregion
private void OnCardClicked(object sender, RoutedEventArgs e)
{
Process.Start(new ProcessStartInfo("https://www.inkore.net") { UseShellExecute = true });
}

private void Page_Loaded(object sender, RoutedEventArgs e)
#region Example Code

public void UpdateExampleCode()
{
if (!this.IsLoaded) return;

Example1.Xaml = Example1Xaml;
Example2.Xaml = Example2Xaml;
Example2.CSharp = Example2CS;
}

public string Example1Xaml => $@"
<ikw:SimpleStackPanel Spacing=""4"">
<ui:SettingsCard x:Name=""settingsCard""
Description=""This is a default card, with the Header, HeaderIcon, Description and Content set.""
Header=""This is the Header"" IsEnabled=""{EnableToggle1.IsOn}"">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph=""&#xE799;""/>
</ui:SettingsCard.HeaderIcon>
<ComboBox SelectedIndex=""0"">
<ComboBoxItem>Option 1</ComboBoxItem>
<ComboBoxItem>Option 2</ComboBoxItem>
<ComboBoxItem>Option 3</ComboBoxItem>
</ComboBox>
</ui:SettingsCard>
<ui:SettingsCard Description=""You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon.""
Header=""Icon options"" IsEnabled=""{EnableToggle1.IsOn}"">
<ui:SettingsCard.HeaderIcon>
<Image Width=""20"" Height=""20"" Source=""/Assets/WpfLibrary_256w.png""
RenderOptions.BitmapScalingMode=""HighQuality""/>
</ui:SettingsCard.HeaderIcon>
<ui:ToggleSwitch />
</ui:SettingsCard>
<ui:SettingsCard Header=""A card with custom objects as its Description""
IsEnabled=""{EnableToggle1.IsOn}"">
<ui:SettingsCard.Description>
<ui:HyperlinkButton Content=""Learn more about Inkways"" />
</ui:SettingsCard.Description>
<Button Content=""Open Inkways Editor"" Style=""{{StaticResource {{x:Static ui:ThemeKeys.AccentButtonStyleKey}}}}"" />
</ui:SettingsCard>
<ui: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"" IsEnabled=""{EnableToggle1.IsOn}"">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph=""&#xE745;""/>
</ui:SettingsCard.HeaderIcon>
<Button Content=""This control will wrap vertically!""/>
</ui:SettingsCard>
<ui:SettingsCard Header=""This is a card with a Header only""
IsEnabled=""{EnableToggle1.IsOn}"">
</ikw:SimpleStackPanel>
";

public string Example2Xaml => $@"
<ui:SettingsCard Click=""OnCardClicked"" IsEnabled=""{EnableToggle2.IsOn}""
Description=""A SettingsCard can be made clickable and you can leverage the Command property or Click event.""
Header=""A clickable SettingsCard"" IsClickEnabled=""True"">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph=""&#xE799;""/>
</ui:SettingsCard.HeaderIcon>
<TextBlock Foreground=""{{DynamicResource {{x:Static ui:ThemeKeys.TextFillColorSecondaryBrushKey}}}}""
Text=""This is content"" />
</ui:SettingsCard>
<ui:SettingsCard ActionIconToolTip=""Open in new window""
Click=""OnCardClicked"" IsClickEnabled=""True""
Description=""You can customize the ActionIcon and ActionIconToolTip.""
Header=""Customizing the ActionIcon"" IsEnabled=""{EnableToggle2.IsOn}"">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph=""&#xE774;""/>
</ui:SettingsCard.HeaderIcon>
<ui:SettingsCard.ActionIcon>
<ui:FontIcon Glyph=""&#xE8A7;""/>
</ui:SettingsCard.ActionIcon>
</ui:SettingsCard>
<ui:SettingsCard Click=""OnCardClicked""
IsActionIconVisible=""False"" IsClickEnabled=""True""
Header=""Hiding the ActionIcon"" IsEnabled=""{EnableToggle2.IsOn}"">
<ui:SettingsCard.HeaderIcon>
<ui:FontIcon Glyph=""&#xE72E;""/>
</ui:SettingsCard.HeaderIcon>
</ui:SettingsCard>
";

public string Example2CS => $@"
private void OnCardClicked(object sender, RoutedEventArgs e)
{{
Process.Start(new ProcessStartInfo(""https://www.inkore.net"") {{ UseShellExecute = true }});
}}
";

#endregion
}
}

0 comments on commit ece9c6d

Please sign in to comment.