CODEWITHSUNDEEP
c#wpftemplatestriggers
Stephen
Stephen

Reputation: 1183

WPF ControlTemplate - trigger different background color for Ellipse

I'm learning to use WPF and I am having problems. I'm creating a custom button that should change background color when I mouse over it. At this point I have following code:

<ControlTemplate x:Key="myButtonTemplate" TargetType="{x:Type Button}">
        <Grid>
            <Ellipse x:Name="outerElipse" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Green" Offset="0"/>
                        <GradientStop Color="Purple" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="20">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="LightBlue" Offset="0"/>
                        <GradientStop Color="Blue" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.Foreground="White"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="Black"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

The problem is that I don't know hot to trigger it ot the first(outer) ellipse. The following line also gives an error "The member "Fill" is not recognized or accesible:

<Setter Property="Fill" Value="Black"/>

Upvotes: 0

Views: 511

Answers (1)

Prateek Shrivastava
Prateek Shrivastava

Reputation: 1937

Assign the Name of the outer elipse to the TargetName property of the Setter.

Ex:

<Setter Property="Fill" Value="Black" TargetName="outerElipse"/>

Upvotes: 2

Related Questions