WPF UserControl 动态大小/停靠/锚点和故事板答案

【问题标题】：WPF UserControl Dynamic Size / Dock / Anchor & StoryBoardWPF UserControl 动态大小/停靠/锚点和故事板
【发布时间】：2010-11-18 10:02:47
【问题描述】：

我正在寻找有关创建 WPF 用户控件的一些指导。

我的目标是创建一个不确定的进度条，来回滑动图像。我希望能够将此用户控件的左右边缘停靠到窗口的两侧，因此如果用户调整窗口大小，进度条的宽度也会增加。我不在乎高度，那可以是恒定的。

这就是我所拥有的，它工作得很好，除了当我将控件添加到表单时，我无法设置停靠选项，并且我不知道如何使情节提要动画以使用用户控件的整个宽度。

<UserControl
    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="WPFStyle.PGBProgress"
    x:Name="MotionProgressBar" Width="550" Margin="5" Height="100" MinWidth="550" MinHeight="100" MaxWidth="550" MaxHeight="100">
    <UserControl.Resources>
        <Storyboard x:Key="Motion" AutoReverse="True" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="127"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="242"/>
                <SplineDoubleKeyFrame KeyTime="00:00:03" Value="342"/>
                <SplineDoubleKeyFrame KeyTime="00:00:04" Value="433"/>
                <SplineDoubleKeyFrame KeyTime="00:00:07" Value="433"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:04" Value="-2"/>
                <SplineDoubleKeyFrame KeyTime="00:00:07" Value="-2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="89.705"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="179.29"/>
                <SplineDoubleKeyFrame KeyTime="00:00:03" Value="270.032"/>
                <SplineDoubleKeyFrame KeyTime="00:00:04" Value="362.902"/>
                <SplineDoubleKeyFrame KeyTime="00:00:07" Value="717.969"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Motion}"/>
        </EventTrigger>
    </UserControl.Triggers>

    <Grid x:Name="LayoutRoot">
        <Image x:Name="image" HorizontalAlignment="Left" Width="85.622" Source="image.png" Stretch="Fill" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Grid>
</UserControl>

【问题讨论】：

标签： .net wpf user-controls

【解决方案1】：

用这个替换你的 TranslateTransform.X 动画：

<DoubleAnimation Storyboard.TargetName="image" 
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
                 From="0"
                 To="{Binding ElementName=MotionProgressBar, Path=ActualWidth}"
                 Duration="0:0:7"/>

如您所见，真正的技巧是绑定；我将To 属性绑定到UserControl 的ActualWidth。相同的概念可以应用于您的其他动画，甚至使用关键帧（虽然我发现没有关键帧会更容易一些）。

至于“对接”，我想你要找的是

HorizontalAlignment="Stretch"

这将导致您的控件填满它给定的所有宽度。

【讨论】：

这很好用；但是，我现在意识到它会在控件右侧为图像设置动画，因为它将 X 属性移动到实际宽度 - 是否易于绑定到 (ActualWidth - image.Width)？
是的，在绑定上使用转换器。

【解决方案2】：

停靠不起作用，因为您将最小/最大尺寸硬编码到控件中。这与对接效果不佳。这与硬编码动画有关，请参阅@Charlie 的回答。

所以，只使用真正必要的尺寸约束，比如在这种情况下可能是 MinHeight 和 MinWidth，但其余部分保持打开状态。

【讨论】：