如何在单击按钮xaml时更改图像

Question

我在使用 xaml 设置图像时遇到了麻烦，因为 C# 不希望变得友好，并且因为位图而允许我通过代码本身更改图像。所以我正在了解有关 xaml 触发器的更多信息，并且想知道如何编辑图像的源属性以在单击每个按钮时进行更改？

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Custom="using:Microsoft.UI.Xaml.Controls" NavigationCacheMode="Enabled"
    x:Class="Phasmaphobia_Editor.Views.WebViewPage"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">
    <Grid x:Name="ContentArea" Margin="0,0,0,0" Loaded="ContentArea_Loaded">
        <Image x:Name="dark_banner" Height="100" Width="216" Margin="32,72,0,0" Source="/Assets/dark.png" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Button Content="6 Tanglewood Dr" Height="42" Width="226" Margin="27,183,0,0" VerticalAlignment="Top" >
            <Button.Triggers>
                
            </Button.Triggers>
        </Button>
        <Button Content="10 Ridgeview Ct" Height="42" Width="226" Click="Button_Click" Margin="27,232,0,0" VerticalAlignment="Top"/>
        <Button Content="13 Willow St" Height="42" Width="226" Click="Button_Click_1" Margin="27,283,0,0" VerticalAlignment="Top"/>
        <Button Content="42 Edgefield Rd" Height="42" Width="226" Margin="27,334,0,0" VerticalAlignment="Top"/>
        <Button Content="Bleasdale Farmhouse" Height="42" Width="226" Margin="27,385,0,0" VerticalAlignment="Top"/>
        <Button Content="Camp Woodwind" Height="42" Width="226" Margin="27,436,0,0" VerticalAlignment="Top"/>
        <Button Content="Grafton Farmhouse" Height="42" Width="226" Margin="27,487,0,0" VerticalAlignment="Top"/>
        <Button Content="Maple Lodge Campsite" Height="42" Width="226" Click="Button_Click_2" Margin="27,538,0,0" VerticalAlignment="Top"/>
        <Button Content="Prison" Height="42" Width="226" Margin="27,589,0,0" VerticalAlignment="Top"/>
        <Button Content="Brownstone High School" Height="42" Width="226" Click="Button_Click_3" Margin="27,640,0,0" VerticalAlignment="Top"/>
        <Image x:Name="light_banner" Height="100" Width="216" Margin="32,72,0,0" Source="/Assets/light.png" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Image Margin="267,72,36,86" Source="{x:Bind imagesource}"/>
    </Grid>
</Page>

我尝试通过 C# 代码更改图像，但我不断收到位图转换等错误和内容，所以我实际上只是在寻找在每次单击按钮时将图像更改为其他内容的东西。

Answer 1

您可以利用XAML 行为。您可以通过名称 Microsoft.Xaml.Behaviors.Uwp.Managed.

从 nuget 添加它。

在下面的示例代码中，开头显示的是 First.png。然后，如果单击该按钮，它将被替换为 Second.png。

<Page
    ...
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
    <Page.Resources>
        <BitmapImage x:Key="FirstImage" UriSource="/Assets/First.png" />
        <BitmapImage x:Key="SecondImage" UriSource="/Assets/Second.png" />
    </Page.Resources>
    <Grid>
        <Button Content="change image">
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="Click">
                    <core:ChangePropertyAction TargetObject="{Binding ElementName=target}"
                                               PropertyName="Source"
                                               Value="{StaticResource SecondImage}"/>
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
        </Button>
        <Image x:Name="target"
               Source="{StaticResource FirstImage}"/>
        ...
    </Grid>
</Page>