CODEWITHSUNDEEP
wpfbindingcoloranimation
dbostream
dbostream

Reputation: 811

Wpf color animation binding

I have stumbled upon a really annoying problem, it would seem to be something trivial to achieve but I cannot figure out a solution. What I want to do is bind the To property of a ColorAnimation to a DependencyProperty called MouseOverColor. This is what my style looks like:

<Style TargetType="{x:Type local:Button}">
  <Setter Property="Background" Value="{StaticResource SolidBlueDark}" />
  <Setter Property="BorderBrush" Value="{x:Null}" />
  <Setter Property="BorderThickness" Value="0" />
  <Setter Property="FocusVisualStyle" Value="{x:Null}" />
  <Setter Property="Foreground" Value="White" />
  <Setter Property="HorizontalContentAlignment" Value="Center" />
  <Setter Property="MouseOverColor" Value="Cyan" />
  <Setter Property="Padding" Value="1" />
  <Setter Property="VerticalContentAlignment" Value="Center" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:Button}">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
              <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.4" />
              </VisualStateGroup.Transitions>
              <VisualState Name="Normal" />
              <VisualState Name="MouseOver">
                <Storyboard>
                  <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).Color" To="{TemplateBinding MouseOverColor}" />
                </Storyboard>
              </VisualState>
              <VisualState Name="Pressed" />
              <VisualState Name="Disabled" />
            </VisualStateGroup>
            <VisualStateGroup Name="FocusStates">
              <VisualState Name="Unfocused" />
              <VisualState Name="Focused" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border 
            Name="Border" 
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Height="{TemplateBinding Height}" 
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            Width="{TemplateBinding Width}" />
          <ContentPresenter 
            TextBlock.Foreground="{TemplateBinding Foreground}" 
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
            Margin="{TemplateBinding Padding}" 
            RecognizesAccessKey="True" 
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

What happens is that nothing happens, the color of the button remains the same. If I change the ColorAnimation line into the following it changes color:

<ColorAnimation 
  Storyboard.TargetName="Border"
  Storyboard.TargetProperty="(Border.Background).Color"
  To="Cyan" />

But I need the To color to be set by the MouseOverColor property and not be hard coded, how can I achieve this? I have tried all kinds of bindings but the result is always the same.

Thanks in advance.

EDIT: It also works if I use a static resource but it is not what I want. Is there really no way to do what I want? It doesn't make any sense to create a new style for each "mouse over" color I want to be able to use and hard code it.

Upvotes: 1

Views: 2019

Answers (2)

ygoe
ygoe

Reputation: 20354

According to a Microsoft author in this MSDN forum thread, what you are trying to do is not supported by WPF. The animation values must be frozen so they can't be dynamic or bound. I just stumbled over the same restriction. No error is being thrown if you try to do it, it just doesn't set any colour.

Upvotes: 2

NSGaga
NSGaga

Reputation: 14302

Not sure if that's the solution for your case...

If MouseOverColor is your own custom property - try the other way of getting Templated Binding to work. 

{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverColor}

I have explained it in some more details here

Image.Height TemplateBinding does not work

Upvotes: 0

Related Questions