如何使用XAML移动图像? [英] How to move a Image using XAML?

问题描述

我想在WPF中移动Image控件(实际上，Image将从左移到右，然后从左移到右，然后循环重复.)，我想使用XAML来控制它.另外，我想在按下MouseEnter事件时移动图像控件. 以下是我在Grid中的图片:

I want to move a Image control in WPF (Actually, the Image will move from left to right then to left then to right, looply repeat this.), I want to use XAML to control it. Also, I want the image control to move when hiting MouseEnter event. Below is my Image in a Grid:

<Window
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" mc:Ignorable="d" x:Class="TimeZoneDaemonApp.Window1"
Title="TimeZone Browser (CodeBy:CS48516)"  Icon="/TimeZoneDaemonApp;component/Images/Settings.png" Background="{x:Null}" WindowStartupLocation="Manual" Width="704" Height="170" Opacity="1" WindowStyle="None" AllowsTransparency="True">

<Grid PreviewMouseLeftButtonDown="Grid_PreviewMouseLeftButtonDown" PreviewMouseRightButtonDown="Grid_PreviewMouseRightButtonDown" >
    <Grid.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Black"/>
        </Style>
    </Grid.Resources>
    <Border  OpacityMask="White" Height="100" >
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset=".6"/>
                <GradientStop Color="Green" Offset=".9"/>
            </LinearGradientBrush>
        </Border.Background>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Border Grid.Column="0"><TextBlock FontFamily="@微软雅黑" Padding="0,5,0,0" FontSize="12pt" Foreground="Black" FontWeight="bold" Background="#FFF87800"  TextAlignment="Center"><Run Text="Hong Kong"/></TextBlock></Border>
            <Border Grid.Column="1"><TextBlock Background="#FFB0D428" Padding="0,5,0,0" FontFamily="@微软雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="New York" TextAlignment="Center"/></Border>
            <Border Grid.Column="2"><TextBlock Background="#FF2283E4" Padding="0,5,0,0" FontFamily="@微软雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="London" TextAlignment="Center"/></Border>
            <Border Grid.Column="3"><TextBlock Background="#FF20D4D0" Padding="0,5,0,0" FontFamily="@微软雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="Pairs" TextAlignment="Center"/></Border>
            <Border Grid.Column="4"><TextBlock Background="#FF28D428" Padding="0,5,0,0" FontFamily="@微软雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="Sydney" TextAlignment="Center"/></Border>
            <Border Grid.Column="5"><TextBlock Background="#FFD040F8" Padding="0,5,0,0" FontFamily="@微软雅黑" FontSize="16" FontWeight="Bold" Foreground="Black"    Text="Brasilia" TextAlignment="Center"/></Border>
            <Border Grid.Column="0" Grid.Row="1"><TextBlock x:Name="HK" Padding="0,5,0,0" Background="#FFA04C00" FontFamily="@微软雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
            <Border Grid.Column="1" Grid.Row="1"><TextBlock x:Name="NY" Padding="0,5,0,0" Background="#FF708418" FontFamily="@微软雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
            <Border Grid.Column="2" Grid.Row="1"><TextBlock x:Name="UK" Padding="0,5,0,0" Background="#FF184880" FontFamily="@微软雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
            <Border Grid.Column="3" Grid.Row="1"><TextBlock x:Name="PS" Padding="0,5,0,0" Background="#FF188480" FontFamily="@微软雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
            <Border Grid.Column="4" Grid.Row="1"><TextBlock x:Name="SD" Padding="0,5,0,0" Background="#FF188418" FontFamily="@微软雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>
            <Border Grid.Column="5" Grid.Row="1"><TextBlock x:Name="BR" Padding="0,5,0,0" Background="#FF7800A8" FontFamily="@微软雅黑" FontSize="12" Foreground="White"   TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"><Run Text="Hong Kong"/></TextBlock></Border>

            <Border Grid.Column="0" Grid.Row="2"><TextBlock x:Name="HKT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
            <Border Grid.Column="1" Grid.Row="2"><TextBlock x:Name="NYT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
            <Border Grid.Column="2" Grid.Row="2"><TextBlock x:Name="UKT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
            <Border Grid.Column="3" Grid.Row="2"><TextBlock x:Name="PST" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
            <Border Grid.Column="4" Grid.Row="2"><TextBlock x:Name="SDT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" FontWeight="Bold"><Run Text="Load"/></TextBlock></Border>
            <Border Grid.Column="5" Grid.Row="2"><TextBlock x:Name="BRT" Padding="0,5,0,0" FontFamily="@Gill Sans MT" FontSize="21pt" Foreground="White"   TextAlignment="Center" TextDecorations="None" FontWeight="Bold" Background="Transparent"><Run Text="Load"/></TextBlock></Border>
        </Grid>
    </Border>
    <Image HorizontalAlignment="Left" Height="50" Margin="0,0,0,0"  Source="Images/cloud.png" Stretch="Fill" VerticalAlignment="Top" Width="190">
    </Image>
</Grid>

我是WPF的新手，任何人都可以帮忙吗?谢谢. 实际上，我在SOF中找到了一章: WPF.通过编程将图像最容易地移动到(X，Y)的简单方法?

I am a new learner for WPF, AnyOne can Help on this? thx. Actually I have found a chapter in SOF: WPF. Easiest way to move Image to (X,Y) programmatically?

嗯，那不是我想要的.

推荐答案

下面列出了我的答案: 我们需要一个Canvas来包含图像，并且可以使用Canvas的"Left"属性来移动图像.

My Answer listed below: we need a Canvas to contain the images and we can use the "Left" property of the Canvas to move the Image.

<Canvas x:Name="MyCanvas">
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard >
                    <Storyboard Storyboard.TargetName="img1" Storyboard.TargetProperty="(Canvas.Left)">
                        <DoubleAnimation From="0" To="514" Duration="0:0:20" AccelerationRatio=".2" DecelerationRatio=".8" RepeatBehavior="23:59:59" AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>

这篇关于如何使用XAML移动图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！