Question

我还在学习WPF，我需要一些帮助，希望有人能够帮助我。所以我的问题是，有没有办法在wpf中制作一些会自动更改3张图片的图片框？例如，当我运行应用程序时，它显示1张图片，然后在2秒后它变为另一张，依此类推？

好的，所以我这样添加： XAML代码： <Image x:Name="slider" Stretch="Fill" Source="Slider/slide1.png"/>

并且cs：

private void MainForm_Loaded(object sender, RoutedEventArgs e)
        {
            var dispatcherTimer = new DispatcherTimer();
            dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
            dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
            dispatcherTimer.Start();
        }

    private void dispatcherTimer_Tick(object sender, EventArgs e)
    {


    }

现在如何让它在刻度线上更改滑块？

Answer 1

private void dispatcherTimer_Tick(object sender, EventArgs e)
{
    BitmapImage image = new BitmapImage();
    image.BeginInit();
    image.UriSource = new Uri("pack://application:,,,/YourAppName;component/someimage.png");
    image.EndInit();

    this.myImage.Source = image;
}

直接操作WPF元素并不是一个好形式，要做“适当的”WPF，你应该使用MVVM。

Answer 2

您可以直接从xaml本身动画源属性检查以下代码

    <Grid Height="200" Width="200">
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard >
                    <Storyboard  >
                        <ObjectAnimationUsingKeyFrames Duration="00:00:06"  RepeatBehavior="Forever"  Storyboard.TargetName="img1" Storyboard.TargetProperty="(Image.Source)">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                <DiscreteObjectKeyFrame.Value>
                                    <BitmapImage UriSource="image1.png" />
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="00:00:02">
                                <DiscreteObjectKeyFrame.Value>
                                    <BitmapImage UriSource="image2.png" />
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="00:00:04">
                                <DiscreteObjectKeyFrame.Value>
                                    <BitmapImage UriSource="image3.png" />
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <Image x:Name="img1" Stretch="Fill"></Image>
    </Grid>

更新

我认为您不能使用故事板为图像源设置动画，因此您必须拍摄3张图像并在其中显示可见性属性

要异步加载图像，您必须绑定，对于绑定，您可以创建属性，否则您可以通过转换器参数传递图像路径

   <Grid  Height="200" Width="200">
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard >
                    <Storyboard Duration="00:00:06" RepeatBehavior="Forever"  >
                        <ObjectAnimationUsingKeyFrames Duration="00:00:03"    Storyboard.TargetName="img1" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="{x:Static Visibility.Collapsed}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:02"    Storyboard.TargetName="img2" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="{x:Static Visibility.Collapsed}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:04"    Storyboard.TargetName="img3" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="{x:Static Visibility.Collapsed}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <Image x:Name="img1" Visibility="Collapsed" Source="{Binding IsAsync=True,  Converter={StaticResource ImgConverter}, ConverterParameter=http://mydomain.com/image3.png}" />
        <Image x:Name="img2" Visibility="Collapsed" Source="{Binding IsAsync=True,  Converter={StaticResource ImgConverter}, ConverterParameter=http://mydomain.com/image2.png}" />
        <Image x:Name="img3" Visibility="Collapsed" Source="{Binding IsAsync=True,  Converter={StaticResource ImgConverter}, ConverterParameter=http://mydomain.com/image1.png}" />
    </Grid>

转换器：

 public class ImgConverter : IValueConverter
 {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (parameter != null)
        {
            BitmapImage bi = new BitmapImage();
            bi.BeginInit();
            bi.UriSource = new Uri(parameter.ToString(), UriKind.Absolute);
            bi.CacheOption = BitmapCacheOption.OnLoad;
            bi.EndInit();
            return bi;
        }
            return null;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
 }

在框中更改图像

2 个答案: