如何改变图像上点击按钮xaml

ilmyapht  于 2023-11-14  发布在  其他
关注(0)|答案(2)|浏览(126)

我有麻烦设置图像使用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#代码更改图像,但我一直从位图转换等得到错误和东西,所以我真的只是在寻找每次单击按钮时将图像更改为其他内容的东西。

envsm3lx

envsm3lx1#

你可以使用XAML Behaviors。你可以从nuget添加它的名字Microsoft.Xaml.Behaviors.Uwp.Managed
在下面的示例代码中,首先显示First.png。然后,如果单击Button,它将被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>

字符串

ubof19bj

ubof19bj2#

C#不想变得友好,因为位图,它允许我通过代码本身改变图像。
实际上,你可以在后面的代码中做这件事,你可以处理按钮点击事件来改变图像控件的源代码
如果你只是想改变dark_banner图像的源,你只是使用路径作为源,你可以做以下事情。

<Image x:Name="dark_banner" Height="100" Width="216" Margin="32,72,0,0" Source="/Assets/london.png" HorizontalAlignment="Left" VerticalAlignment="Top"/>
  <Button Content="6 Tanglewood Dr" Click="Button_Click" Height="42" Width="226" Margin="27,183,0,0" VerticalAlignment="Top" />

字符串
验证码:

private void Button_Click(object sender, RoutedEventArgs e)
 {
     BitmapImage bitmapImage = new BitmapImage();
     bitmapImage.UriSource = new Uri("ms-appx:///Assets/paris.png");
     dark_banner.Source = bitmapImage;
 }


如果你想改变你使用绑定作为源的源。

<Button Content="6 Tanglewood Dr" Click="Button_Click" Height="42" Width="226" Margin="27,183,0,0" VerticalAlignment="Top" />
 <Image x:Name="TargetImage" Height="100" Width="216" Margin="267,72,36,86" Source="{x:Bind ImageSource,Mode=OneWay}"/>


您需要做更多的工作。您必须实现INotifyPropertyChanged Interface来更新绑定。
验证码:

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    
    public MainPage()
    {
        this.InitializeComponent();
        ImageSource = new BitmapImage();
        ImageSource.UriSource = new Uri("ms-appx:///Assets/paris.png");
    }

    private BitmapImage _imagesource;
    public BitmapImage ImageSource 
    {
        get
        { 
        return _imagesource; 
        }

        set 
        {
            _imagesource = value;
            RaisePropertyChange(nameof(ImageSource));
        }

    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChange(string name) 
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); ;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        BitmapImage bitmapImage = new BitmapImage();
        bitmapImage.UriSource = new Uri("ms-appx:///Assets/london.png");
        ImageSource = bitmapImage;
    }
}

相关问题