I have a custom 3 state Button
that is supposed to cycle between 3 different states (colours) as it is clicked. However the click handler I've written doesn't have any effect on the background colour of the Border
within the ControlTemplate
.
I'm probably missing something very simple, but I'd really appreciate a fresh pair of eyes to spot what it may be.
The ControlTemplate
and Button.Click
handler are below:
<Style x:Key="FilterButtonStyle" TargetType="{x:Type local:FilterButton}"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="ButtonBackground" BorderThickness="0" Padding="0"
Margin="0" CornerRadius="6"
Background="{StaticResource blueShader}" >
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource glowShadow}">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource textBrush}"/>
<Setter Property="Margin" Value="4,4,0,4"></Setter>
<Setter Property="Padding" Value="4"></Setter>
<Setter Property="Height" Value="55"></Setter>
<Setter Property="Width" Value="55"></Setter>
<Setter Property="FontSize" Value="10"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextBlock.TextWrapping" Value="Wrap"></Setter>
<Setter Property="HasDisabledState" Value="True"></Setter>
<Setter Property="OnColour" Value="{StaticResource greenShader}"></Setter>
<Setter Property="OffColour" Value="{StaticResource blueShader}"></Setter>
<Setter Property="DisabledColour" Value="{StaticResource redShader}"></Setter>
</Style>
private void FilterButton_Click(object sender, RoutedEventArgs e)
{
if (!this.CanChangeState) { return; }
// Get child border element.
Border border = this.Template.LoadContent() as Border;
// Cycle through button states.
switch (this.ButtonState)
{
case ButtonStates.Off:
this.ButtonState = ButtonStates.On;
border.Background = this.OnColour;
break;
case ButtonStates.On:
if (this.HasDisabledState)
{
this.ButtonState = ButtonStates.Disabled;
border.Background = this.DisabledColour;
}
else
{
this.ButtonState = ButtonStates.Off;
border.Background = this.OffColour;
}
break;
case ButtonStates.Disabled:
this.ButtonState = ButtonStates.Off;
border.Background = this.OffColour;
break;
}
}
Never mind, I found that a better way of handling this was to use ControlTemplate
triggers to change the Button
colour based on the ButtonState property.
<Style x:Key="FilterButtonStyle" TargetType="{x:Type local:FilterButton}"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="ButtonBackground" BorderThickness="0" Padding="0" Margin="0" CornerRadius="6"
Background="{StaticResource blueShader}" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource glowShadow}">
</Setter>
</Trigger>
<Trigger Property="local:FilterButton.ButtonState" Value="On">
<Setter TargetName="ButtonBackground" Property="Background" Value="{StaticResource greenShader}"></Setter>
</Trigger>
<Trigger Property="local:FilterButton.ButtonState" Value="Off">
<Setter TargetName="ButtonBackground" Property="Background" Value="{StaticResource blueShader}"></Setter>
</Trigger>
<Trigger Property="local:FilterButton.ButtonState" Value="Disabled">
<Setter TargetName="ButtonBackground" Property="Background" Value="{StaticResource redShader}"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource textBrush}"/>
<Setter Property="Margin" Value="4,4,0,4"></Setter>
<Setter Property="Padding" Value="4"></Setter>
<Setter Property="Height" Value="55"></Setter>
<Setter Property="Width" Value="55"></Setter>
<Setter Property="FontSize" Value="10"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextBlock.TextWrapping" Value="Wrap"></Setter>
<Setter Property="HasDisabledState" Value="True"></Setter>
</Style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.