I'm using the UWP Community Toolkit Expander in my App. I'd like to be able to disable the expansion of the control (so it doesn't expand when clicked when certain criteria are met).
Ideally this would hide the expander arrow or make it grey as well as stopping the expansion from happening.
I could fork the code and make the necessary changes, but I was wondering if there are any simpler ways to achieve this?
Thanks in advance.
Ideally this would hide the expander arrow or make it grey as well as stopping the expansion from happening.
For your requirements, you just need edit the default HeaderToggleButtonStyle for Expander.
Copy the default style from here. add new animation into the Disable state to make the Arrow icon gray when Expander disable.
This is edited style
<Style x:Key="HeaderToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="2,0,0,0" />
<Setter Property="Height" Value="40" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle
x:Name="HoverPanel"
Grid.ColumnSpan="2"
Fill="Transparent" />
<Slider
x:Name="ArrowRotation"
Maximum="180"
Minimum="-180"
Visibility="Collapsed"
Value="90" />
<FontIcon
x:Name="Arrow"
Margin="12"
FontFamily="Segoe MDL2 Assets"
FontSize="12"
Glyph=""
RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
<RotateTransform />
</FontIcon.RenderTransform>
</FontIcon>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="0,0,12,0"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Foreground="{TemplateBinding Foreground}"
RenderTransformOrigin="0.5,0.5" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="0.0"
Duration="0:0:0.1" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundListLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="0.0"
Duration="0:0:0.1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="0.0"
Duration="0:0:0.1" />
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="0.0"
Duration="0:0:0.1" />
<!-- gray arrow -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Gray" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="{Binding ElementName=ArrowRotation, Path=Value}"
Duration="0:0:0.1" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="{Binding ElementName=ArrowRotation, Path=Value}"
Duration="0:0:0.1" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="{Binding ElementName=ArrowRotation, Path=Value}"
Duration="0:0:0.1" />
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedDisabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
BeginTime="0:0:0"
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="{Binding ElementName=ArrowRotation, Path=Value}"
Duration="0:0:0.1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="IndeterminatePointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="IndeterminatePressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="IndeterminateDisabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualState x:Name="RightDirection" />
<VisualState x:Name="DownDirection" />
<VisualState x:Name="LeftDirection">
<VisualState.Setters>
<Setter Target="ArrowRotation.Value" Value="-90" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UpDirection">
<VisualState.Setters>
<Setter Target="ArrowRotation.Value" Value="-90" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage
<controls:Expander HeaderStyle="{StaticResource HeaderToggleButtonStyle}"
x:Name="Expander2"
Margin="0"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch"
ExpandDirection="Down"
Header="This is the header - expander 2"
IsEnabled="False"
IsExpanded="False">
<Grid Height="256" Background="{ThemeResource SystemControlBackgroundBaseHighBrush}">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="This is the expanded content without a content overlay"
TextWrapping="Wrap" />
</Grid>
</controls:Expander>