Как динамически изменить фоновое изображение окна в WPF одним нажатием кнопки?

Question

Я хочу изменить или «прокрутить» различные фоновые изображения для главного окна на основе нажатия кнопки. Количество различных фонов будет динамическим и будет зависеть от количества изображений в определенной папке. Поэтому при каждой загрузке программы можно прокручивать разное количество фонов.

Я также хочу иметь возможность вернуться к предыдущему фоновому изображению, так что все это выглядит как карусель. Пример: программа загружается, и A.jpg загружается как фоновое изображение. Я нажимаю кнопку «Вправо», и A.jpg скользит влево, а затем B.jpg скользит справа, чтобы стать новым фоновым изображением. Я снова нажимаю «Вправо», и C.jpg скользит справа. Затем я нажимаю «Влево», и B.jpg возвращается обратно с левой стороны и т. Д. И т. Д.

Надеюсь, это имеет смысл. Я довольно новичок в XAML и WPF, поэтому просто пытаюсь понять, как мне поступить. Любая помощь или руководство будет высоко ценится. Спасибо!

Answer 1

Вот как вы можете это сделать! Я проверил это. Вы можете применять анимацию для эффектов типа карусели.

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>

Answer 2

Я бы использовал ListView и ObservableCollection<string> во ViewModel. ObservableCollection<string> содержит динамический список путей к изображениям. Убедитесь, что для параметра «Действие построения изображений» установлено значение «Ресурс». Затем в свойстве Background Window поместите ImageBrush, где вы привязываете свойство Source к свойству SelectedItem со значением ListView. Путь строк изображений следует схеме, которую вы можете найти здесь: https://docs.microsoft.com/en-us/dotnet/framework/wpf/app-development/pack-uris-in-wpf

По желанию (изображения являются BuildAction к ресурсу и копируются, если новее):

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 (Коллекция может использоваться как строка или список Uri. Вы должны создать новый Uri в Converter из значения, если используете строки)

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

Вот и все.