WPF UserControl動態大小/ Dock/Anchor＆StoryBoard

我正在尋找一些關於創建WPF UserControl的指導。WPF UserControl動態大小/ Dock/Anchor＆StoryBoard

我的目標是創建一個獨立的進度條，來回地滑動圖像。我希望能夠將此用戶控件的左右邊緣停靠在窗口的兩側，以便用戶調整窗口大小時，進度條的寬度也會增加。我不關心高度，可以保持不變。

這裏是我，除非我的控件添加到形式，它的偉大工程，我不能設置對接選項，我無法弄清楚如何使故事板動畫使用用戶控件的整個寬度。

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

來源

2009-08-10 Nate

這個替換您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"

這將導致你的控制，以填補它被賦予了所有的寬度。

來源

2009-08-10 20:21:32 Charlie

This works great;不過，我現在意識到它將圖像從控件sicne的右側移開，它將X屬性移動到實際寬度 - 是否容易綁定到（ActualWidth - image.Width）？ – Nate 2009-08-11 15:01:50

是的，在綁定上使用Converter。 – Charlie 2009-08-11 18:47:56

停靠不起作用，因爲您將最小/最大尺寸硬編碼到控件中。與對接效果不佳。這與硬編碼動畫有關，請參閱@查理的答案。

所以，只能使用真正必要的大小約束，比如在這種情況下可能是MinHeight和MinWidth，但是保持其餘。

來源

2009-08-10 20:42:18

WPF UserControl動態大小/ Dock/Anchor＆StoryBoard

回答

相關問題