UWPの設定Grid.Columnのスタイルが正しく動作しない

Question

UWPアプリケーションを開発し、Grid.Columnプロパティを設定するコードでコントロールごとのスタイルを適用して、グリッドの周りの要素を効果的に移動しようとしています。しかし、私の要素は、アニメーションが実行されているにもかかわらず、それらがどこにあるかにとどまります。 Grid。*以外のセッターは動作し、コードとライブプロパティウィンドウの両方でスタイルが適用されているのがわかります。

私は、私が行っていることを達成するための他の方法があると知っています。おそらくそれらのうちの1つを実行しますが、ここで何が起こっているのか知りたいと思います。私は自分のページのサンプルとスタイリングを適用するコマンドを投稿します：

MainPage.xamlを

<Page 
    x:Class="UWPApp.Scorekeeper.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:UWPApp.Scorekeeper" 
    xmlns:viewmodels="using:UWPApp.Scorekeeper.Models.ViewModels" 
    xmlns:converters="using:UWPApp.Scorekeeper.Converters" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:mo="using:UWPApp.Scorekeeper.Models" 
    mc:Ignorable="d" 
    x:Name="MainPageElement" 
    d:DesignHeight="600" 
    d:DesignWidth="1024"> 



    <Page.Resources> 
     <DataTemplate x:Key="GridHorizontalTemplate" x:DataType="local:MainPage"> 
      <Grid MinWidth="768" MinHeight="500" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="69*"/> 
        <ColumnDefinition Width="76*"/> 
        <ColumnDefinition Width="76*"/> 
        <ColumnDefinition Width="69*"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="73*"/> 
        <RowDefinition Height="135*"/> 
        <RowDefinition Height="69*"/> 
        <RowDefinition Height="43*"/> 
       </Grid.RowDefinitions> 
       <Button Foreground="{ThemeResource SystemControlForegroundChromeMediumBrush}" Command="{Binding ElementName=MainPageElement, Path=EnterGoalCommand}" CommandParameter="{Binding ElementName=MainPageElement,Path=StateModel.HomeID}" x:Name="HomeGoalBtn" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Margin="0,0.4,0,0" d:LayoutOverrides="LeftMargin, RightMargin" > 
        <Button.Resources> 
         <Style x:Key="FlippedStyle" TargetType="Button"> 
          <Setter Property="Grid.Column" Value="2"/> 
         </Style> 
         <Storyboard x:Key="ToFlipAnimation"> 
          <RepositionThemeAnimation FromHorizontalOffset="-487"/> 
         </Storyboard> 
         <Storyboard x:Key="FromFlipAnimation"> 
          <RepositionThemeAnimation FromHorizontalOffset="487"/> 
         </Storyboard> 
        </Button.Resources> 
        <Viewbox Margin="40" Stretch="Uniform"> 
         <TextBlock Text="Goal" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> 
        </Viewbox> 
       </Button> 
       <Button Foreground="{ThemeResource SystemControlForegroundChromeMediumBrush}" Command="{Binding ElementName=MainPageElement, Path=EnterGoalCommand}" CommandParameter="{Binding ElementName=MainPageElement,Path=StateModel.AwayID}" x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1" Grid.Column="2" Margin="0,0.4,-0.2,0" d:LayoutOverrides="LeftMargin, RightMargin" > 
        <Button.Resources> 
         <Style x:Key="FlippedStyle" TargetType="Button"> 
          <Setter Property="Grid.Column" Value="1"/> 
         </Style> 
         <Storyboard x:Key="ToFlipAnimation"> 
          <RepositionThemeAnimation FromHorizontalOffset="487"/> 
         </Storyboard> 
         <Storyboard x:Key="FromFlipAnimation"> 
          <RepositionThemeAnimation FromHorizontalOffset="-487"/> 
         </Storyboard> 
        </Button.Resources> 
        <Viewbox Margin="40" Stretch="Uniform"> 
         <TextBlock Text="Goal" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> 
        </Viewbox> 
       </Button> 
      </Grid> 
     </DataTemplate> 
    </Page.Resources> 

    <ContentPresenter x:Name="MainContent" Margin="0,0,0,0" HorizontalAlignment="Stretch" d:LayoutOverrides="Width, Height" VerticalAlignment="Stretch"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="1000"></AdaptiveTrigger> 
        </VisualState.StateTriggers> 

        <VisualState.Setters> 
         <Setter Target="MainContent.ContentTemplate" Value="{StaticResource GridHorizontalTemplate}" /> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
    </ContentPresenter> 
</Page> 

MainPage.xaml.cs

public ICommand FlipScreen => new CommandHandler(() => 
     { 
      if (!flipped) 
      { 
       flipped = true; 
       foreach (var item in this.FindChildren<FrameworkElement>()) 
       { 
        object styleObject; 
        if (item.Resources.TryGetValue("FlippedStyle", out styleObject)) 
        { 
         item.Style = (Style)styleObject; 
        } 
        object animationObject; 
        if (item.Resources.TryGetValue("ToFlipAnimation", out animationObject)) 
        { 
         Storyboard board = animationObject as Storyboard; 
         if (board.GetCurrentState() != ClockState.Stopped) 
         { 
          board.Stop(); 
         } 
         foreach (var subitem in board.Children) 
         { 
          Storyboard.SetTarget(subitem, item); 
         } 
         board.Begin(); 
        } 
       } 
      } 
      else 
      { 
       flipped = false; 
       foreach (var item in this.FindChildren<FrameworkElement>()) 
       { 
        item.Style = null; 
        object animationObject; 
        if (item.Resources.TryGetValue("FromFlipAnimation", out animationObject)) 
        { 
         Storyboard board = animationObject as Storyboard; 
         if (board.GetCurrentState() != ClockState.Stopped) 
         { 
          board.Stop(); 
         } 
         foreach (var subitem in board.Children) 
         { 
          Storyboard.SetTarget(subitem, item); 
         } 
         board.Begin(); 
        } 
       } 
      } 
     }); 

FindChildren：

public static List<T> FindChildren<T>(this FrameworkElement element) where T : FrameworkElement 
     { 
      int childrenCount = VisualTreeHelper.GetChildrenCount(element); 
      var children = new FrameworkElement[childrenCount]; 

      List<T> list = new List<T>(); 

      for (int i = 0; i < childrenCount; i++) 
      { 
       var child = VisualTreeHelper.GetChild(element, i) as FrameworkElement; 
       children[i] = child; 
       if (child is T) 
        list.Add(child as T); 
      } 

      for (int i = 0; i < childrenCount; i++) 
       if (children[i] != null) 
       { 
        var subChild = FindChildren<T>(children[i]); 
        if (subChild != null) 
         list.AddRange(subChild); 
       } 

      return list; 
     } 

を

Answer 1

ボタンのリソース内のデフォルトのボタンスタイルが実際にそのボタンに適用されるかどうかは不明です。

<Button ... > 
    <Button.Style> 
     <Style TargetType="Button"> 
      <Setter Property="Grid.Column" Value="2"/> 
     </Style> 
    </Button.Style> 
    <Button.Resources> 
     ... 
    </Button.Resources> 
    <Viewbox ...> 
     ... 
    </Viewbox> 
</Button>