Changing ellipse fill color inside a button

Question

I want to change the ellipse fill color to green when the button is enabled.

   <Button x:Name="btn_Kaart2" Grid.Column="1" Grid.Row="2" IsEnabled="False">
        <Button.Template>
            <ControlTemplate>
                <Ellipse x:Name="ellipse_2" 
                         Height="35"
                         Stroke="Black"
                         Fill="Red"
                         Margin="-300,440,0,0"/>
            </ControlTemplate>
        </Button.Template>
    </Button>

Normally I would use ellipse_2.Fill = "Color" but that doesn't work, program can't find ellipse_2

Could you provide the code where you're trying to change the colour? — blas3nik, Dec 17 '15 at 15:16
@blas3nik Currently I just have a method with a if clause that checks if the button is enabled or not and that method is called out when the UserControl is loaded. — UkoM, Dec 17 '15 at 15:20
Have a look at this answer: http://stackoverflow.com/questions/34117944/listbox-items-return-string-when-datatemplate-is-button — Salah Akbari, Dec 17 '15 at 15:23

AntiHeadshot · Accepted Answer · 2015-12-17T15:54:32.113

You can use a databinding with RelativeSource to get this without any additional code

<Button x:Name="btn_Kaart2" Grid.Column="1" Grid.Row="2" IsEnabled="False">
    <Button.Template>
        <ControlTemplate>
            <Ellipse x:Name="ellipse_2" 
                Height="35"
                Margin="-300,440,0,0"
                Stroke="Black">
            <Ellipse.Style>
                <Style TargetType="Ellipse">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType=Button}}" Value="false">
                            <Setter Property="Fill" Value="red"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType=Button}}" Value="true">
                            <Setter Property="Fill" Value="green"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
            </Ellipse>
        </ControlTemplate>
    </Button.Template>
</Button>

It's important that the Ellipse itself has no Fill attribute.
You can try this by changing the IsEnabled value in the *.xaml and the color should change immediately in the designer.

Well, that should work, but for some reason it won't. I'll mark this as answered and try to implement the button in a other way. — UkoM, Dec 17 '15 at 15:49

Changing ellipse fill color inside a button

1 Answers1