WPF UserControlダイナミックサイズ/ドック/アンカー＆ストーリーボード

Question

私はWPF 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

最小/最大サイズをコントロールにハードコードしたため、ドッキングが機能しません。それはドッキングでうまくいかない。そしてそれはハードコーディングされたアニメーションに関連しています@チャーリーの答えを参照してください。

このようにMinHeightとMinWidthのように実際に必要なサイズ制約を使用しますが、残りは開いたままにしてください。