c# - How do I change window background image dynamically in WPF with a button click?

Question

I want to change or "scroll through" different background images for the main window based on a button click. The number of different backgrounds will be dynamic and will be based on something like the number of images in a specific folder. So each time the program loads there could be a different number of backgrounds to scroll through.

I also want to be able to go back to the previous background image, so the whole thing kind of acts like a carousel. Example: the program loads and A.jpg is loaded as background image. I click the "Right" button and A.jpg slides off to the left, and then B.jpg slides in from the right to become the new background image. I click "Right" again and C.jpg slides in from the right. I then click "Left" and B.jpg slides back in from the left side, etc. etc.

Hopefully that makes sense. I'm quite new to XAML and WPF so just trying to figure out how I would go about doing this. Any help or guidance would be much appreciated. Thanks!

标签： c#wpfxaml

Answer 1

我会在 ViewModel 中使用 aListView和 an 。ObservableCollection<string>包含图像路径的ObservableCollection<string>动态列表。确保图像的构建操作设置为资源。然后在 Window 的 Background 属性中放置一个 ImageBrush，您可以在其中将 Source 属性绑定到 SelectedItem 属性ListView。图像的路径字符串遵循您可以在此处找到的方案：https ://docs.microsoft.com/en-us/dotnet/framework/wpf/app-development/pack-uris-in-wpf

根据需要（如果更新，图像是 BuildAction 到 Resource 和复制）：

主窗口.xaml

<Window x:Class="WinTest.MainWindow"
        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:local="clr-namespace:WinTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <local:TestViewModel x:Key="viewModel"/>
        <local:ImageConverter x:Key="converter"/>
    </Window.Resources>
    <Window.DataContext>
        <Binding Source="{StaticResource viewModel}" IsAsync="True"/>
    </Window.DataContext>
    <Window.Background>
        <ImageBrush ImageSource="{Binding SelectedImagePath, Converter={StaticResource converter}}"/>
    </Window.Background>
    <Grid Background="Transparent">
        <ListView Background="Transparent" SelectedValue="{Binding SelectedImagePath, Mode=TwoWay}" ItemsSource="{Binding PathList}"/>
    </Grid>
</Window>

TestViewModel.cs（集合可以用作字符串或 Uri 列表。如果使用字符串，则必须在 Converter 中实例化一个新的 Uri 值）

public class TestViewModel : BasePropertyChangeNotification
{
    public ObservableCollection<Uri> PathList
    {
        get;
        private set;
    }

    public Uri SelectedImagePath
    {
        get { return this.selectedImagePath; }
        set { this.SetProperty(ref this.selectedImagePath, value); }
    }
    private Uri selectedImagePath = new Uri("pack://application:,,,/Images/img1.jpg", UriKind.RelativeOrAbsolute);

    public TestViewModel()
    {
        this.PathList = new ObservableCollection<Uri>
        {
            new Uri("pack://application:,,,/Images/img1.jpg", UriKind.RelativeOrAbsolute),
            new Uri("pack://application:,,,/Images/img2.jpg", UriKind.RelativeOrAbsolute),
            new Uri("pack://application:,,,/Images/img3.jpg", UriKind.RelativeOrAbsolute),
            new Uri("pack://application:,,,/Images/img4.jpg", UriKind.RelativeOrAbsolute),
            new Uri("pack://application:,,,/Images/img13.jpg", UriKind.RelativeOrAbsolute)
        };
    }
}

图像转换器.cs

public class ImageConverter : IValueConverter
{
    public object Convert(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new BitmapImage(value as Uri);
    }

    public object ConvertBack(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Binding.DoNothing;
    }
}

就这样。