`Expander` control but with `ToggleSwitch` instead of `ExpandCollapseChevron` #10146

tom-huntington · 2024-11-08T23:37:16Z

tom-huntington
Nov 8, 2024

I want an Expander control that (instead of a Chevron) has a ToggleSwitch that is on when expanded and off when collapsed.

This control would visually represent a std::optional<struct>.

I found the code responsible is here:

microsoft-ui-xaml/src/controls/dev/Expander/Expander.xaml

Line 111 in d74a033

    
           <ToggleButton x:Name="ExpanderHeader" AutomationProperties.AutomationId="ExpanderToggleButton" Background="{ThemeResource ExpanderHeaderBackground}" BackgroundSizing="{TemplateBinding BackgroundSizing}" BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}" BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}" MinHeight="{TemplateBinding MinHeight}" CornerRadius="{TemplateBinding CornerRadius}" IsEnabled="{TemplateBinding IsEnabled}" Padding="{StaticResource ExpanderHeaderPadding}" Style="{StaticResource ExpanderHeaderDownStyle}" HorizontalAlignment="Stretch" HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}" VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />

which uses Style="{StaticResource ExpanderHeaderDownStyle}" to implement the Chevron. The style is defined here:

microsoft-ui-xaml/src/controls/dev/Expander/Expander_themeresources.xaml

Lines 295 to 500 in d74a033

    
           <Style x:Key="ExpanderHeaderUpStyle" TargetType="ToggleButton" BasedOn="{StaticResource ExpanderHeaderDownStyle}"> 
        
             <Setter Property="Padding" Value="{StaticResource ExpanderHeaderPadding}" /> 
        
             <Setter Property="HorizontalContentAlignment" Value="Left" /> 
        
             <Setter Property="BackgroundSizing" Value="InnerBorderEdge" /> 
        
             <Setter Property="Template"> 
        
               <Setter.Value> 
        
                 <ControlTemplate TargetType="ToggleButton"> 
        
                   <Grid x:Name="ToggleButtonGrid" CornerRadius="{TemplateBinding CornerRadius}" BackgroundSizing="{TemplateBinding BackgroundSizing}" Background="{TemplateBinding Background}" MinHeight="{TemplateBinding MinHeight}" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Width="{TemplateBinding Width}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
        
                     <Grid.ColumnDefinitions> 
        
                       <ColumnDefinition Width="*" /> 
        
                       <ColumnDefinition Width="Auto" /> 
        
                     </Grid.ColumnDefinitions> 
        
                     <VisualStateManager.VisualStateGroups> 
        
                       <VisualStateGroup x:Name="CommonStates"> 
        
                         <VisualState x:Name="Normal"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                         </VisualState> 
        
                         <VisualState x:Name="PointerOver"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderBorderPointerOverBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderPointerOverBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                           <VisualState.Setters> 
        
                             <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="PointerOverOn" /> 
        
                           </VisualState.Setters> 
        
                         </VisualState> 
        
                         <VisualState x:Name="Pressed"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderBorderPressedBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderPressedBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                           <VisualState.Setters> 
        
                             <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="PressedOn" /> 
        
                           </VisualState.Setters> 
        
                         </VisualState> 
        
                         <VisualState x:Name="Disabled"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                         </VisualState> 
        
                         <VisualState x:Name="Checked"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                           <VisualState.Setters> 
        
                             <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="NormalOff" /> 
        
                           </VisualState.Setters> 
        
                         </VisualState> 
        
                         <VisualState x:Name="CheckedPointerOver"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPointerOver}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderBorderPointerOverBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderPointerOverBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPointerOverBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                           <VisualState.Setters> 
        
                             <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="PointerOverOff" /> 
        
                           </VisualState.Setters> 
        
                         </VisualState> 
        
                         <VisualState x:Name="CheckedPressed"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderForegroundPressed}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderBorderPressedBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBorderPressedBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronPressedBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                           <VisualState.Setters> 
        
                             <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="PressedOff" /> 
        
                           </VisualState.Setters> 
        
                         </VisualState> 
        
                         <VisualState x:Name="CheckedDisabled"> 
        
                           <Storyboard> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonGrid" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevron" Storyboard.TargetProperty="Foreground"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledForeground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="BorderBrush"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderHeaderDisabledBorderBrush}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronBorder" Storyboard.TargetProperty="Background"> 
        
                               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ExpanderChevronBackground}" /> 
        
                             </ObjectAnimationUsingKeyFrames> 
        
                           </Storyboard> 
        
                           <VisualState.Setters> 
        
                             <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="NormalOff" /> 
        
                           </VisualState.Setters> 
        
                         </VisualState> 
        
                         <VisualState x:Name="Indeterminate" /> 
        
                         <VisualState x:Name="IndeterminatePointerOver" /> 
        
                         <VisualState x:Name="IndeterminatePressed" /> 
        
                         <VisualState x:Name="IndeterminateDisabled" /> 
        
                       </VisualStateGroup> 
        
                     </VisualStateManager.VisualStateGroups> 
        
                     <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" /> 
        
                     <Border x:Name="ExpandCollapseChevronBorder" Grid.Column="1" Width="{ThemeResource ExpanderChevronButtonSize}" Height="{ThemeResource ExpanderChevronButtonSize}" Margin="{ThemeResource ExpanderChevronMargin}" CornerRadius="{ThemeResource ControlCornerRadius}" BorderBrush="{ThemeResource ExpanderChevronBorderBrush}" BorderThickness="{ThemeResource ExpanderChevronBorderThickness}" Background="{ThemeResource ExpanderChevronBackground}"> 
        
                       <controls:AnimatedIcon Width="{StaticResource ExpanderChevronGlyphSize}" Height="{StaticResource ExpanderChevronGlyphSize}" x:Name="ExpandCollapseChevron" RenderTransformOrigin="0.5, 0.5" Foreground="{ThemeResource ExpanderChevronForeground}" HorizontalAlignment="Center" VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" local:AnimatedIcon.State="NormalOn" xmlns:local="using:Microsoft.UI.Xaml.Controls"> 
        
                         <animatedvisuals:AnimatedChevronUpDownSmallVisualSource /> 
        
                         <controls:AnimatedIcon.FallbackIconSource> 
        
                           <controls:FontIconSource Glyph="{StaticResource ExpanderChevronUpGlyph}" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="12" IsTextScaleFactorEnabled="False" /> 
        
                         </controls:AnimatedIcon.FallbackIconSource> 
        
                         <controls:AnimatedIcon.RenderTransform> 
        
                         </controls:AnimatedIcon.RenderTransform> 
        
                       </controls:AnimatedIcon> 
        
                     </Border> 
        
                   </Grid> 
        
                 </ControlTemplate> 
        
               </Setter.Value> 
        
             </Setter> 
        
           </Style>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Expander` control but with `ToggleSwitch` instead of `ExpandCollapseChevron` #10146

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Expander control but with ToggleSwitch instead of ExpandCollapseChevron #10146

tom-huntington Nov 8, 2024

Replies: 0 comments

`Expander` control but with `ToggleSwitch` instead of `ExpandCollapseChevron` #10146

tom-huntington
Nov 8, 2024