2015-02-10 25 views
-1

enter image description here創建故事板動畫,但不具有行和colums WPF XAML C#

當複選框選擇完成兩個按鈕將動畫我只是想做到這樣,該網格來在衆目睽睽之下,我試圖worikng行跨度和columspan但不工作不知道如何使用它。在充分看法我的動畫與窗口的另一邊連接。

碼=>

<Window x:Class="Login.View.ControlPanel" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="ControlPanel" Height="300" Width="300"> 
    <Grid> 
     <Grid.Triggers> 
      <EventTrigger RoutedEvent="CheckBox.Checked"> 
       <BeginStoryboard> 
        <!--<Storyboard> 
         <DoubleAnimation Storyboard.TargetName="ControlsGrid" 
             Storyboard.TargetProperty="Margin" 
             To="0" Duration="0:0:0.3" /> 
        </Storyboard>--> 
        <Storyboard> 
         <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ControlsGrid"> 
          <EasingThicknessKeyFrame KeyTime="0:0:0.3" Value="0"> 
           <EasingThicknessKeyFrame.EasingFunction> 
            <CubicEase EasingMode="EaseInOut"/> 
           </EasingThicknessKeyFrame.EasingFunction> 
          </EasingThicknessKeyFrame> 
         </ThicknessAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="CheckBox.Unchecked"> 
       <BeginStoryboard> 
        <!--<Storyboard> 
         <DoubleAnimation Storyboard.TargetName="ControlsGrid" 
             Storyboard.TargetProperty="Height" 
             To="0" Duration="0:0:0.3" /> 
        </Storyboard>--> 
        <Storyboard> 
         <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ControlsGrid"> 
          <EasingThicknessKeyFrame KeyTime="0:0:0.3" Value="0 0 0 -66"> 
           <EasingThicknessKeyFrame.EasingFunction> 
            <CubicEase EasingMode="EaseInOut"/> 
           </EasingThicknessKeyFrame.EasingFunction> 
          </EasingThicknessKeyFrame> 
         </ThicknessAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Grid.Triggers> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <TextBlock Text="SilverLight" Margin="10"/> 
     <TextBlock Text=".Net Framework" Margin="10" Grid.Row="1"/> 
     <TextBlock Text=" Printer Drivers" Margin="10" Grid.Row="2"/> 
     <TextBlock Text="Email Listner" Margin="10" Grid.Row="3"/> 
     <TextBlock Text="Scanner Component" Margin="10" Grid.Row="4"/> 
     <TextBlock Text="Scanner Driver Version 1.0.0" Margin="10" Grid.Row="5"/> 
     <CheckBox x:Name="cbSilverlight" Grid.Column="1" Margin="10"/> 
     <CheckBox x:Name="cbNetframework" Grid.Column="1" Grid.Row="1" Margin="10"/> 
     <CheckBox x:Name="cbAlisprinter" Grid.Column="1" Grid.Row="2" Margin="10"/> 
     <CheckBox x:Name="cbEmaillistner" Grid.Column="1" Grid.Row="3" Margin="10"/> 
     <CheckBox x:Name="cbScanner" Grid.Column="1" Grid.Row="4" Margin="10"/> 
     <CheckBox x:Name="cbScannerDriver" Grid.Column="1" Grid.Row="5" Margin="10"/> 

     <Grid Grid.Row="7" Name="ControlsGrid" Height="66" VerticalAlignment="Bottom" Background="Black" Margin="0 0 0 -66"> 
      <WrapPanel HorizontalAlignment="Right"> 
       <Button Height="30" Width="70" Margin="10" Foreground="White" Background="Green">Cancel</Button> 
       <Button Height="30" Width="70" Margin="10" Foreground="White" Background="Green">Proceed</Button> 
      </WrapPanel> 
     </Grid> 

    </Grid> 
</Window> 
+0

究竟是什麼問題?你的意思是網格(黑色背景)不應該出現,只有按鈕應該從底部動畫? 「你是什麼意思」全面看待我的動畫與窗口的另一面連接。「什麼是「連接」? – Vinkal 2015-02-10 06:59:02

+0

@Coder對不起連接意味着堅持網格到另一邊意味着動畫來到完整的一面,想要整行的動畫,但只有在第一列中我應該怎麼做 – 2015-02-10 07:01:53

+0

我所理解的是,你不希望網格出現在所有。當複選框被選中時,您只需要在屏幕底部同時設置「取消」和「繼續」按鈕的動畫。請讓我知道我的理解是否正確? – Vinkal 2015-02-10 07:11:09

回答

1

解決方案:我已經修改您的代碼來解決這個問題。

修改代碼:

<Window x:Class="Login.View.ControlPanel" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="ControlPanel" Height="400" Width="500"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <Grid> 
      <Grid.Triggers> 
       <EventTrigger RoutedEvent="CheckBox.Checked"> 
        <BeginStoryboard> 
         <!--<Storyboard> 
         <DoubleAnimation Storyboard.TargetName="ControlsGrid" 
             Storyboard.TargetProperty="Margin" 
             To="0" Duration="0:0:0.3" /> 
        </Storyboard>--> 
         <Storyboard> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ControlsGrid"> 
           <EasingThicknessKeyFrame KeyTime="0:0:0.3" Value="0"> 
            <EasingThicknessKeyFrame.EasingFunction> 
             <CubicEase EasingMode="EaseInOut"/> 
            </EasingThicknessKeyFrame.EasingFunction> 
           </EasingThicknessKeyFrame> 
          </ThicknessAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="CheckBox.Unchecked"> 
        <BeginStoryboard> 
         <!--<Storyboard> 
         <DoubleAnimation Storyboard.TargetName="ControlsGrid" 
             Storyboard.TargetProperty="Height" 
             To="0" Duration="0:0:0.3" /> 
        </Storyboard>--> 
         <Storyboard> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ControlsGrid"> 
           <EasingThicknessKeyFrame KeyTime="0:0:0.3" Value="0 0 0 -66"> 
            <EasingThicknessKeyFrame.EasingFunction> 
             <CubicEase EasingMode="EaseInOut"/> 
            </EasingThicknessKeyFrame.EasingFunction> 
           </EasingThicknessKeyFrame> 
          </ThicknessAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Grid.Triggers> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <TextBlock Text="SilverLight" Margin="10"/> 
      <TextBlock Text=".Net Framework" Margin="10" Grid.Row="1"/> 
      <TextBlock Text="ALIS Printer Drivers" Margin="10" Grid.Row="2"/> 
      <TextBlock Text="ALIS Email Listner" Margin="10" Grid.Row="3"/> 
      <TextBlock Text="ALIS Scanner Component" Margin="10" Grid.Row="4"/> 
      <TextBlock Text="ALIS Scanner Driver Version 1.0.0" Margin="10" Grid.Row="5"/> 
      <CheckBox x:Name="cbSilverlight" Grid.Column="1" Margin="10"/> 
      <CheckBox x:Name="cbNetframework" Grid.Column="1" Grid.Row="1" Margin="10"/> 
      <CheckBox x:Name="cbAlisprinter" Grid.Column="1" Grid.Row="2" Margin="10"/> 
      <CheckBox x:Name="cbEmaillistner" Grid.Column="1" Grid.Row="3" Margin="10"/> 
      <CheckBox x:Name="cbScanner" Grid.Column="1" Grid.Row="4" Margin="10"/> 
      <CheckBox x:Name="cbScannerDriver" Grid.Column="1" Grid.Row="5" Margin="10"/> 
     </Grid> 
     <Grid Grid.Row="1"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <DockPanel Name="ControlsGrid" Height="66" Background="Black" VerticalAlignment="Bottom" Margin="0,0,0,-66"> 
       <Button DockPanel.Dock= "Right" Height="30" Width="70" Margin="10,5" Foreground="White" Background="Green" HorizontalAlignment="Right">Cancel</Button> 
       <Button DockPanel.Dock="Right" Height="30" Width="70" Margin="10,5" Foreground="White" Background="Green" HorizontalAlignment="Right">Proceed</Button> 
      </DockPanel> 
     </Grid> 
    </Grid> 
</Window> 
+0

謝謝@Coder – 2015-02-10 09:58:14