Example code for ToggleSplitButton

iNKORE-NET · Jan 22, 2025 · f5f251b · f5f251b
1 parent ccdb39b
commit f5f251b
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 7 deletions.
diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/ToggleSplitButtonPage.xaml b/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/ToggleSplitButtonPage.xaml
@@ -13,14 +13,12 @@
         <local:ControlExample
             x:Name="Example1"
             HeaderText="Using ToggleSplitButton to control bulleted list functionality in RichEditBox"
-            WebViewHeight="150"
-            XamlSource="Buttons\ToggleSplitButton\ToggleSplitButtonSample1.txt">
-            <ui:ToggleSplitButton
-                x:Name="myListButton"
+            WebViewHeight="150">
+            <ui:ToggleSplitButton x:Name="myListButton"
                 VerticalAlignment="Top"
                 AutomationProperties.Name="Bullets"
                 IsCheckedChanged="MyListButton_IsCheckedChanged">
-                <ui:FontIcon x:Name="mySymbolIcon" Icon="{x:Static ui:SegoeFluentIcons.List}"/>
+                <ui:FontIcon x:Name="mySymbolIcon" Icon="{x:Static ui:SegoeFluentIcons.List}" Margin="4"/>
                 <ui:ToggleSplitButton.Flyout>
                     <ui:Flyout Placement="Bottom">
                         <StackPanel Orientation="Horizontal">
@@ -44,8 +42,7 @@
                 </ui:ToggleSplitButton.Flyout>
             </ui:ToggleSplitButton>
             <local:ControlExample.Options>
-                <RichTextBox
-                    x:Name="myRichEditBox"
+                <RichTextBox x:Name="myRichEditBox"
                     Width="240"
                     MinHeight="96"
                     AutomationProperties.Name="Text entry" />

diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/ToggleSplitButtonPage.xaml.cs b/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/ToggleSplitButtonPage.xaml.cs
@@ -28,6 +28,7 @@ public partial class ToggleSplitButtonPage : Page
         public ToggleSplitButtonPage()
         {
             InitializeComponent();
+            UpdateExampleCode();
         }
 
         private void BulletButton_Click(object sender, RoutedEventArgs e)
@@ -72,9 +73,84 @@ private void MyListButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplit
 
         public void UpdateExampleCode()
         {
+            if (!this.IsInitialized) return;
 
+            Example1.Xaml = Example1Xaml;
+            Example1.CSharp = Example1CS;
         }
 
+        public string Example1Xaml => $@"
+<ui:ToggleSplitButton x:Name=""myListButton""
+    AutomationProperties.Name=""Bullets""
+    IsCheckedChanged=""MyListButton_IsCheckedChanged"">
+    <ui:FontIcon x:Name=""mySymbolIcon"" Icon=""{{x:Static ui:SegoeFluentIcons.List}}"" Margin=""4""/>
+    <ui:ToggleSplitButton.Flyout>
+        <ui:Flyout Placement=""Bottom"">
+            <StackPanel Orientation=""Horizontal"">
+                <StackPanel.Resources>
+                    <Style TargetType=""Button"" BasedOn=""{{StaticResource DefaultButtonStyle}}"">
+                        <Setter Property=""Padding"" Value=""4"" />
+                        <Setter Property=""MinWidth"" Value=""0"" />
+                        <Setter Property=""MinHeight"" Value=""0"" />
+                        <Setter Property=""Margin"" Value=""6"" />
+                        <Setter Property=""ui:ControlHelper.CornerRadius"" Value=""{{DynamicResource ControlCornerRadius}}"" />
+                    </Style>
+                </StackPanel.Resources>
+                <Button AutomationProperties.Name=""Bulleted list"" Click=""BulletButton_Click"">
+                    <ui:FontIcon Icon=""{{x:Static ui:SegoeFluentIcons.List}}"" />
+                </Button>
+                <Button AutomationProperties.Name=""Roman numerals list"" Click=""BulletButton_Click"">
+                    <ui:FontIcon Icon=""{{x:Static ui:SegoeFluentIcons.BulletedList}}"" />
+                </Button>
+            </StackPanel>
+        </ui:Flyout>
+    </ui:ToggleSplitButton.Flyout>
+</ui:ToggleSplitButton>
+
+<RichTextBox x:Name=""myRichEditBox""
+    AutomationProperties.Name=""Text entry"" />
+";
+
+        public string Example1CS => $@"
+private void BulletButton_Click(object sender, RoutedEventArgs e)
+{{
+    Button clickedBullet = (Button)sender;
+    var symbol = (FontIcon)clickedBullet.Content;
+
+    if (symbol.Glyph == SegoeFluentIcons.List.Glyph)
+    {{
+        _type = ""•"";
+        mySymbolIcon.Icon = SegoeFluentIcons.List;
+        myListButton.SetValue(AutomationProperties.NameProperty, ""Bullets"");
+    }}
+    else if (symbol.Glyph == SegoeFluentIcons.BulletedList.Glyph)
+    {{
+        _type = ""I)"";
+        mySymbolIcon.Icon = SegoeFluentIcons.BulletedList;
+        myListButton.SetValue(AutomationProperties.NameProperty, ""Roman Numerals"");
+    }}
+    myRichEditBox.Selection.Text = _type;
+
+    myListButton.IsChecked = true;
+    myListButton.Flyout.Hide();
+    myRichEditBox.Focus();
+}}
+
+private void MyListButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplitButtonIsCheckedChangedEventArgs args)
+{{
+    if (sender.IsChecked)
+    {{
+        //add bulleted list
+        myRichEditBox.Selection.Text = _type;
+    }}
+    else
+    {{
+        //remove bulleted list
+        myRichEditBox.Selection.Text = """";
+    }}
+}}
+";
+
         #endregion
 
     }