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，但保持其余部分打開。