WPF UserControl动态大小/ Dock / Anchor和StoryBoard

Question

我正在寻找有关创建WPF UserControl的一些指导。

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

这是我拥有的，它很有效，除非我将控件添加到窗体，我无法设置停靠选项，我无法弄清楚如何使故事板动画使用usercontrol的全宽。

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

Answer 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 。 相同的概念可以应用于您的其他动画，甚至使用KeyFrames（虽然我发现没有KeyFrames更容易）。

至于“对接”，我认为你所寻找的是

HorizontalAlignment="Stretch"

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

Answer 2

停靠将无法工作，因为您将最小/最大尺寸硬编码到控件中。 这与对接不太好。 这与硬编码动画有关，请参阅@Charlie的回答。

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