如何通過單擊按鈕在WPF中動態更改窗口背景圖像？

Question

我想基於按鈕單擊來更改或“滾動”主窗口的不同背景圖像。 不同背景的數量將是動態的，並且將基於特定文件夾中圖像的數量。 因此，每次程序加載時，都有不同數量的背景可以滾動瀏覽。

我還希望能夠返回到上一個背景圖像，因此整個過程就像旋轉木馬一樣。 示例：程序加載並且A.jpg作為背景圖像加載。 我單擊“向右”按鈕，A.jpg向左滑動，然后B.jpg從右向滑動，成為新的背景圖像。 我再次單擊“右”，C.jpg從右滑入。 然后，我單擊“左”，然后B.jpg從左側滑回，等等。

希望這是有道理的。 我對XAML和WPF還是很陌生，所以只想弄清楚我將如何去做。 任何幫助或指導將不勝感激。 謝謝！

Answer 1

我將在ViewModel中使用ListView和ObservableCollection<string> 。 ObservableCollection<string>包含圖像路徑的動態列表。 確保將圖像的“生成操作”設置為“資源”。 然后在Window的Background屬性中放置一個ImageBrush，將Source屬性綁定到ListView的SelectedItem屬性。 圖像的路徑字符串遵循您可以在此處找到的方案： https : //docs.microsoft.com/zh-cn/dotnet/framework/wpf/app-development/pack-uris-in-wpf

根據需要（圖像是BuildAction到Resource，如果更新則復制）：

MainWindow.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（Collection可以用作字符串或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)
        };
    }
}

ImageConverter.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;
    }
}

就這樣。

Answer 2

這就是您可以做到的！ 我已經測試過了。 您可以將動畫應用於輪播類型的效果。

public MainWindow()
{
    InitializeComponent();

    myImagesList = new List<ImageBrush>();
    ImageBrush myBrush1 = new ImageBrush(new BitmapImage(new Uri(@"C:\Users\Abdul Rehman\Desktop\1-Rao Hammas Folder\MY PROJECTS\StackOverFlowSolutions\StackOverFlowSolutions\Images\Capture.JPG")));
    ImageBrush myBrush2 = new ImageBrush(new BitmapImage(new Uri(@"C:\Users\Abdul Rehman\\Desktop\1-Rao Hammas Folder\MY PROJECTS\StackOverFlowSolutions\\StackOverFlowSolutions\Images\\Apps-Dialog-Close-icon.png")));
    ImageBrush myBrush3 = new ImageBrush(new BitmapImage(new Uri(@"C:\Users\Abdul Rehman\\Desktop\1-Rao Hammas Folder\MY PROJECTS\StackOverFlowSolutions\\StackOverFlowSolutions\Images\\Capture.JPG")));
    ImageBrush myBrush4 = new ImageBrush(new BitmapImage(new Uri(@"C:\Users\Abdul Rehman\\Desktop\1-Rao Hammas Folder\MY PROJECTS\StackOverFlowSolutions\\StackOverFlowSolutions\Images\\Capture.JPG")));
    ImageBrush myBrush5 = new ImageBrush(new BitmapImage(new Uri(@"C:\Users\Abdul Rehman\\Desktop\1-Rao Hammas Folder\MY PROJECTS\StackOverFlowSolutions\\StackOverFlowSolutions\Images\\Capture.JPG")));    

    myImagesList.Add(myBrush1);
    myImagesList.Add(myBrush2);
    myImagesList.Add(myBrush3);
    myImagesList.Add(myBrush4);
    myImagesList.Add(myBrush5);


    MainWin.Background = myImagesList[index];
}
private int index = 0;
private List<ImageBrush> myImagesList;

private void NextBtn_Click(object sender, RoutedEventArgs e)
{
    index++;
    MainWin.Background = myImagesList[index];
}

private void PrevBtn_Click(object sender, RoutedEventArgs e)
{
    index--;
    MainWin.Background = myImagesList[index];
}  

XAML

<Window x:Class="StackOverFlowSolutions.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Name="MainWin"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Name="NextBtn" Width="30" Height="20" Click="NextBtn_Click">Next</Button>
        <Button Name="PrevBtn" Width="30" Height="20" Margin="297,111,176,180" Click="PrevBtn_Click">Prev</Button>
    </Grid>
</Window>