How can I edit the image source of an image inside of a button on code? (C# WPF // xaml)

Question

So, on startup my app changes the default image to the icon on dark or light mode. This wasn't a problem before when I had the button and image as separate items, but now I wanna unify them into the button with a style. It's almost ready, but the only part left is to know how to change the image source from code.

What I've tried already:

Changing the tag value to the desired image => Image disappears
[Test] Copying the tag image of another button to the desired button => Works, but it's not ideal as I would need to have a button for each image.

Here's my code (Button Style)

<Style TargetType="{x:Type Button}" x:Key="Button21.8.1Rev5">
            <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
            <Setter x:Name="MyAnimatedScaleTransform" Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="{DynamicResource SystemBaseHighColor}" Direction="0" ShadowDepth="0" BlurRadius="8" Opacity="0.5" />
                </Setter.Value>
            </Setter>
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="{DynamicResource SystemAltMediumHighColor}"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="{DynamicResource SystemBaseHighColorBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="FontFamily" Value="Bahnschrift Semibold"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" SnapsToDevicePixels="true" CornerRadius="8" Margin="0,0,0,0" Background="{TemplateBinding Background}">
                            <Grid>
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="Left" Margin="50,16,0,16" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                <Image Margin="10,10,0,10" Source="{TemplateBinding Tag}"  IsHitTestVisible="False" Stretch="Fill" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" Width="30" Grid.Row="0" Grid.Column="0"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true"/>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource SystemAltHighColorBrush}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false"/>
                            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation From="{StaticResource SystemAltMediumHighColor}" To="{StaticResource SystemAltMediumColor}" SpeedRatio="10" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation From="{StaticResource SystemAltMediumColor}" To="{StaticResource SystemAltMediumHighColor}" SpeedRatio="10" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation From="{StaticResource SystemAltMediumColor}" To="{StaticResource SystemBaseMediumColor}" SpeedRatio="10" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="0.99" SpeedRatio="20" AutoReverse="False" />
                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="0.99" SpeedRatio="20" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation From="{StaticResource SystemBaseMediumColor}" To="{StaticResource SystemAltMediumColor}" SpeedRatio="10" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" SpeedRatio="20" AutoReverse="False" />
                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" SpeedRatio="20" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Here's the button code:

<Button x:Name="AnimatedWidthButton2" Content="Normal Button" VerticalAlignment="Bottom" Height="50" Foreground="{DynamicResource SystemBaseHighColorBrush}" Style="{DynamicResource Button21.8.1Rev5}" Click="BACK_Click" Margin="10,0,10,250">
            <Button.Tag>
                <ImageSource>tt-phone-dark.png</ImageSource>
            </Button.Tag>
        </Button>

Here's what I tried in code (.xaml.cs)

AnimatedWidthButton2.Tag = "tt-restart-dark.png";

This will help https://stackoverflow.com/questions/350027/setting-wpf-image-source-in-code — emoacht, Apr 17 '22 at 00:31
@emoacht So, the problem is that I can't access the image that's inside of the button. How can I set the source of the image that's inside of the button? — YourAverageGamer, Apr 17 '22 at 22:25
A straightforward way is to create a Button class which inherits `System.Windows.Controls.Button` and is added with a dependency property of string for image path. Then bind the inner Image's `Source` property with that property so that it will be easily accessed from outside of the Button. — emoacht, Apr 18 '22 at 03:08

score 0 · Answer 1 · answered Apr 17 '22 at 22:35

0

Okay, so after some testing here's the code that solves our mystery:

DeviceSpecificFeatures_Copy2.Tag = (ImageSource)new ImageSourceConverter().ConvertFrom(new Uri(@"pack://application:,,,/gui;Component/tt-launch-dark.png"));

answered Apr 17 '22 at 22:35

YourAverageGamer

9
1

How can I edit the image source of an image inside of a button on code? (C# WPF // xaml)

1 Answers1