8

I have a Button Style:

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
          <Path x:Name="path1" ... Data="...some data...">
            <Path.Fill>
              <LinearGradientBrush EndPoint="0.5,-0.3" StartPoint="0.5,0.8">
                <GradientStop x:Name="gs1" Color="Green" Offset="0.44"/>
                <GradientStop Color="Black" Offset="0.727"/>
              </LinearGradientBrush>
            </Path.Fill>
          </Path>                            
        <ContentPresenter ...properties...   />
      </Grid>

     <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
         <Setter TargetName="???" Property="Color" Value="Green"></Setter>
       </Trigger>
     </ControlTemplate.Triggers>
   </ControlTemplate>
 </Setter.Value>

I want to change the Color of GradientStop with x:Name="gs1" when mouse is over button, so I use Trigger IsMouseOver. How can i get an access to Color Property in Trigger? I tried TargetName="gs1" and TargetName="path1.gs1" but it doesn't work. Any idea?

Dave Clemmer
  • 3,741
  • 12
  • 49
  • 72
Nike
  • 1,297
  • 3
  • 18
  • 21

2 Answers2

9

Try this:

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Style.Resources>
            <LinearGradientBrush x:Key="gs1" EndPoint="0.5,-0.3" StartPoint="0.5,0.8">
                <GradientStop Color="Green" Offset="0.44"/>
                <GradientStop Color="Black" Offset="0.727"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="gs2" EndPoint="0.5,-0.3" StartPoint="0.5,0.8">
                <GradientStop Color="White" Offset="0.44"/>
                <GradientStop Color="Black" Offset="0.727"/>
            </LinearGradientBrush>
        </Style.Resources>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Path x:Name="path1" ........... Fill="{StaticResource gs1}">
                        </Path>
                        <ContentPresenter  .........../>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="path1" Property="Fill" Value="{StaticResource gs2}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>

        </Setter>
    </Style>

it will work for you. You can use DataBinding also, Declare a Color DependencyProperty in code, Bind it with the GradientStop's Color property and update it whenever you want.

viky
  • 17,275
  • 13
  • 71
  • 90
2

I think you are going to have to replace the whole brush. Here is a good example of styling a button.

<ControlTemplate.Triggers>
   <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Fill" TargetName="path1">
         <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,-0.3" StartPoint="0.5,0.8">
               <GradientStop Color="Black" Offset="0.44"/>
               <GradientStop Color="Green" Offset="0.727"/>
            </LinearGradientBrush>
         </Setter.Value>
       </Setter>
    </Trigger>
</ControlTemplate.Triggers>
Muad'Dib
  • 28,542
  • 5
  • 55
  • 68
  • There's also a way to index the GradientStops in XAML but I can't get an example to work... something like , as described at http://books.google.com/books?id=XWu70Oqz6RIC&lpg=PA38&ots=FMR-4o3veZ&dq=pro%20wpf%202008%20with%20c%23%20gradientstops&pg=PA770#v=onepage&q=gradientstops&f=false – sourcenouveau Mar 21 '10 at 17:41
  • you can do it in code, NP, and i am pretty sure you could do it with an animation, but i have never seen any indexer working in xaml – Muad'Dib Mar 21 '10 at 21:38
  • 2
    I have used it successfully to do – sourcenouveau Mar 22 '10 at 17:16