Skip to content

Commit

Permalink
Example code for InfoBadge
Browse files Browse the repository at this point in the history
  • Loading branch information
@NotYoojun
NotYoojun committed Nov 10, 2024
1 parent de30b70 commit a1b9d5b
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 67 deletions.
57 changes: 3 additions & 54 deletions source/iNKORE.UI.WPF.Modern.Gallery/ControlPages/InfoBadgePage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
Title="InfoBadge Page"
d:DesignWidth="800"
DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
mc:Ignorable="d">
mc:Ignorable="d" Loaded="Page_Loaded">
<ui:Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
Expand Down Expand Up @@ -85,15 +85,6 @@
</StackPanel>
</local:ControlExample.Options>

<local:ControlExample.Xaml>
<sys:String xml:space="preserve">
&lt;muxc:NavigationViewItem x:Name=&quot;InboxPage&quot; Content=&quot;Inbox&quot; Icon=&quot;Mail&quot;&gt;
&lt;muxc:NavigationViewItem.InfoBadge&gt;
&lt;muxc:InfoBadge x:Name=&quot;infoBadge1&quot; Value=&quot;5&quot; Opacity=&quot;{Binding InfoBadgeOpacity, Mode=OneWay}&quot;/&gt;
&lt;/muxc:NavigationViewItem.InfoBadge&gt;
&lt;/muxc:NavigationViewItem&gt;
</sys:String>
</local:ControlExample.Xaml>
</local:ControlExample>

<local:ControlExample
Expand Down Expand Up @@ -136,14 +127,6 @@
</StackPanel>
</local:ControlExample.Options>

<local:ControlExample.Xaml>
<sys:String xml:space="preserve">
&lt;muxc:InfoBadge x:Name=&quot;infoBadge2&quot; Style=&quot;{StaticResource $(Style)IconInfoBadgeStyle}&quot; /&gt;
&lt;muxc:InfoBadge x:Name=&quot;infoBadge3&quot; Style=&quot;{StaticResource $(Style)ValueInfoBadgeStyle}&quot; Value=&quot;10&quot; /&gt;
&lt;muxc:InfoBadge x:Name=&quot;infoBadge4&quot; Style=&quot;{StaticResource $(Style)DotInfoBadgeStyle}&quot; /&gt;
</sys:String>
</local:ControlExample.Xaml>

<local:ControlExample.Substitutions>
<local:ControlExampleSubstitution Key="Style" Value="{Binding InfoBadgeStyleComboBox.SelectedValue, Mode=OneWay}" />
</local:ControlExample.Substitutions>
Expand All @@ -170,7 +153,7 @@
Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ui:SymbolIcon HorizontalAlignment="Center" Symbol="Sync" />
<ui:FontIcon HorizontalAlignment="Center" Icon="{x:Static ui:SegoeFluentIcons.Sync}"/>
<ui:InfoBadge
HorizontalAlignment="Right"
VerticalAlignment="Top"
Expand All @@ -184,21 +167,6 @@

</local:ControlExample.Example>

<local:ControlExample.Xaml>
<sys:String xml:space="preserve">
&lt;Button Padding=&quot;0&quot; Width=&quot;200&quot; Height=&quot;60&quot; HorizontalContentAlignment=&quot;Stretch&quot; VerticalContentAlignment=&quot;Stretch&quot;&gt;
&lt;Grid HorizontalAlignment=&quot;Stretch&quot; VerticalAlignment=&quot;Stretch&quot; Width=&quot;Auto&quot; Height=&quot;Auto&quot;&gt;
&lt;SymbolIcon Symbol=&quot;Sync&quot; HorizontalAlignment=&quot;Center&quot;/&gt;
&lt;muxc:InfoBadge Background=&quot;#C42B1C&quot; HorizontalAlignment=&quot;Right&quot; VerticalAlignment=&quot;Top&quot;&gt;
&lt;muxc:InfoBadge.IconSource&gt;
&lt;muxc:FontIconSource FontFamily=&quot;Segoe MDL2 Assets&quot; Glyph=&quot;&#xF13C;&quot; /&gt;
&lt;/muxc:InfoBadge.IconSource&gt;
&lt;/muxc:InfoBadge&gt;
&lt;/Grid&gt;
&lt;/Button&gt;
</sys:String>
</local:ControlExample.Xaml>

<local:ControlExample.Substitutions>
<local:ControlExampleSubstitution Key="Style" Value="{Binding Value.SelectedValue, Source={StaticResource InfoBadgeStyleComboBox}, Mode=OneWay}" />
</local:ControlExample.Substitutions>
Expand All @@ -209,7 +177,7 @@
HorizontalContentAlignment="Stretch"
HeaderText="InfoBadge with Dynamic Value">
<local:ControlExample.Example>
<ui:InfoBadge x:Name="DynamicInfoBadge" HorizontalAlignment="Center" />
<ui:InfoBadge x:Name="DynamicInfoBadge" HorizontalAlignment="Center" Value="1"/>
</local:ControlExample.Example>

<local:ControlExample.Options>
Expand All @@ -223,25 +191,6 @@
Value="1" />
</StackPanel>
</local:ControlExample.Options>

<local:ControlExample.Xaml>
<sys:String xml:space="preserve">
&lt;muxc:InfoBadge Value=&quot;{Binding ElementName=ValueNumberBox, Path=Value, Mode=TwoWay}&quot; /&gt;
&lt;muxc:NumberBox x:Name=&quot;ValueNumberBox&quot; Header=&quot;InfoBadge Value&quot; Value=&quot;1&quot; Minimum=&quot;-1&quot;
SpinButtonPlacementMode=&quot;Inline&quot; ValueChanged=&quot;ValueNumberBox_ValueChanged&quot; /&gt;
</sys:String>
</local:ControlExample.Xaml>
<local:ControlExample.CSharp>
<sys:String xml:space="preserve">
private void ValueNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox sender, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs args)
{
if((int)args.NewValue &gt;= -1)
{
DynamicInfoBadge.Value = (int)args.NewValue;
}
}
</sys:String>
</local:ControlExample.CSharp>
</local:ControlExample>
</StackPanel>
</ui:Page>
108 changes: 95 additions & 13 deletions source/iNKORE.UI.WPF.Modern.Gallery/ControlPages/InfoBadgePage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ public double InfoBadgeOpacity
typeof(InfoBadgePage),
new PropertyMetadata(0.0));

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

public void NavigationViewDisplayMode_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
string paneDisplayMode = e.AddedItems[0].ToString();
Expand All @@ -66,8 +71,14 @@ public void NavigationViewDisplayMode_SelectionChanged(object sender, SelectionC
private void ToggleInfoBadgeOpacity_Toggled(object sender, RoutedEventArgs e)
{
InfoBadgeOpacity = (InfoBadgeOpacity == 0.0) ? 1.0 : 0.0;

UpdateExampleCode();
}

string infoBadge2StyleKey = "AttentionIconInfoBadgeStyle";
string infoBadge3StyleKey = "AttentionValueInfoBadgeStyle";
string infoBadge4StyleKey = "AttentionDotInfoBadgeStyle";

public void InfoBadgeStyleComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
string infoBadgeStyle = e.AddedItems[0].ToString();
Expand All @@ -76,29 +87,35 @@ public void InfoBadgeStyleComboBox_SelectionChanged(object sender, SelectionChan
switch (infoBadgeStyle)
{
case "Attention":
infoBadge2.Style = Resources["AttentionIconInfoBadgeStyle"] as Style;
infoBadge3.Style = Resources["AttentionValueInfoBadgeStyle"] as Style;
infoBadge4.Style = Resources["AttentionDotInfoBadgeStyle"] as Style;
infoBadge2StyleKey = "AttentionIconInfoBadgeStyle";
infoBadge3StyleKey = "AttentionValueInfoBadgeStyle";
infoBadge4StyleKey = "AttentionDotInfoBadgeStyle";
break;

case "Informational":
infoBadge2.Style = Resources["InformationalIconInfoBadgeStyle"] as Style;
infoBadge3.Style = Resources["InformationalValueInfoBadgeStyle"] as Style;
infoBadge4.Style = Resources["InformationalDotInfoBadgeStyle"] as Style;
infoBadge2StyleKey = "InformationalIconInfoBadgeStyle";
infoBadge3StyleKey = "InformationalValueInfoBadgeStyle";
infoBadge4StyleKey = "InformationalDotInfoBadgeStyle";
break;

case "Success":
infoBadge2.Style = Resources["SuccessIconInfoBadgeStyle"] as Style;
infoBadge3.Style = Resources["SuccessValueInfoBadgeStyle"] as Style;
infoBadge4.Style = Resources["SuccessDotInfoBadgeStyle"] as Style;
infoBadge2StyleKey = "SuccessIconInfoBadgeStyle";
infoBadge3StyleKey = "SuccessValueInfoBadgeStyle";
infoBadge4StyleKey = "SuccessDotInfoBadgeStyle";
break;

case "Critical":
infoBadge2.Style = Resources["CriticalIconInfoBadgeStyle"] as Style;
infoBadge3.Style = Resources["CriticalValueInfoBadgeStyle"] as Style;
infoBadge4.Style = Resources["CriticalDotInfoBadgeStyle"] as Style;
infoBadge2StyleKey = "CriticalIconInfoBadgeStyle";
infoBadge3StyleKey = "CriticalValueInfoBadgeStyle";
infoBadge4StyleKey = "CriticalDotInfoBadgeStyle";
break;
}

infoBadge2.Style = Resources[infoBadge2StyleKey] as Style;
infoBadge3.Style = Resources[infoBadge3StyleKey] as Style;
infoBadge4.Style = Resources[infoBadge4StyleKey] as Style;

UpdateExampleCode();
}

private void ValueNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs args)
Expand All @@ -107,16 +124,81 @@ private void ValueNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChanged
{
DynamicInfoBadge.Value = (int)args.NewValue;
}

UpdateExampleCode();
}

#region Example Code

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

Example1.Xaml = Example1Xaml;
Example2.Xaml = Example2Xaml;
Example3.Xaml = Example3Xaml;
Example4.Xaml = Example4Xaml;
}

#endregion
public string Example1Xaml => $@"
<ui:NavigationViewItem
x:Name=""InboxPage""
Content=""Inbox"">
<ui:NavigationViewItem.Icon>
<ui:FontIcon Icon=""{{x:Static ui:SegoeFluentIcons.Mail}}""/>
</ui:NavigationViewItem.Icon>
<ui:NavigationViewItem.InfoBadge>
<ui:InfoBadge x:Name=""infoBadge1""
Opacity=""{InfoBadgeOpacity}"" Value=""5"" />
</ui:NavigationViewItem.InfoBadge>
</ui:NavigationViewItem>
";

public string Example2Xaml => $@"
<ikw:SimpleStackPanel
HorizontalAlignment=""Center""
Orientation=""Horizontal""
Spacing=""20"">
<ui:InfoBadge
x:Name=""infoBadge2""
HorizontalAlignment=""Right""
Style=""{{DynamicResource {infoBadge2StyleKey}}}"" />
<ui:InfoBadge
x:Name=""infoBadge3""
HorizontalAlignment=""Right""
Style=""{{DynamicResource {infoBadge3StyleKey}}}""
Value=""10"" />
<ui:InfoBadge
x:Name=""infoBadge4""
VerticalAlignment=""Center""
Style=""{{DynamicResource {infoBadge4StyleKey}}}"" />
</ikw:SimpleStackPanel>
";

public string Example3Xaml => $@"
<Button Padding=""0""
HorizontalContentAlignment=""Stretch""
VerticalContentAlignment=""Stretch"">
<Grid Width=""Auto"" Height=""Auto""
HorizontalAlignment=""Stretch""
VerticalAlignment=""Stretch"">
<ui:FontIcon HorizontalAlignment=""Center"" Icon=""{{x:Static ui:SegoeFluentIcons.Sync}}""/>
<ui:InfoBadge
HorizontalAlignment=""Right""
VerticalAlignment=""Top""
Background=""#C42B1C"">
<ui:InfoBadge.IconSource>
<ui:FontIconSource FontFamily=""Segoe MDL2 Assets"" Glyph=""&#xF13C;"" />
</ui:InfoBadge.IconSource>
</ui:InfoBadge>
</Grid>
</Button>
";

public string Example4Xaml => $@"
<ui:InfoBadge x:Name=""DynamicInfoBadge"" Value=""{DynamicInfoBadge.Value.ToString()}""/>
";

#endregion
}
}

0 comments on commit a1b9d5b

Please sign in to comment.