Hello, in my resource dictionary I have this code:

<ControlTemplate x:Key="close_button_template" TargetType="{x:Type Button}"> <Grid> <Ellipse> <Ellipse.Fill> <ImageBrush ImageSource="Image.png"/> </Ellipse.Fill> </Ellipse> </Grid> </ControlTemplate>

How to make a trigger, so that when you click and hover the mouse over a button, the images directly inside the ellipse change?

    2 answers 2

    <ControlTemplate x:Key="close_button_template" TargetType="{x:Type Button}"> <Grid> <Ellipse> <Ellipse.Fill> <ImageBrush x:Name="PART_ImageBrush" ImageSource="Image.png"/> </Ellipse.Fill> </Ellipse> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="PART_ImageBrush" Property="ImageSource" Value="ImageWhenMouseOver.png" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="PART_ImageBrush" Property="ImageSource" Value="ImageWhenPressed.png" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>

      VisualStudio 2017 "Blank App"

      XAML

        <Button x:Name="button" Content="Button1" HorizontalAlignment="Left" Margin="400,20,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.258,-5" Click="Button_Click" Height="80" Width="80"/>

      C # (Set the original image in the properties of the button: right-click -> Brush -> image)

        private void Button1_Click(object sender, RoutedEventArgs e) { button1.Background = new ImageBrush { ImageSource = new BitmapImage(new Uri("ms-appx:/Images/timerg.png", UriKind.RelativeOrAbsolute)) }; }

      or C #

        private void Button1_Click(object sender, RoutedEventArgs e) { BitmapImage bmp = new BitmapImage(); Uri u = new Uri("ms-appx:/Images/timer.png", UriKind.RelativeOrAbsolute); bmp.UriSource = u; // NOTE: change starts here Image i = new Image(); i.Source = bmp; button1.Content = i; }