UWP設置Grid.Column的樣式不起作用

Question

我正在開發UWP應用，並嘗試在代碼中為每個控件應用一種樣式，該樣式將設置Grid.Column屬性，從而有效地在網格中移動元素。 但是，即使動畫運行，我的元素也會保留在原處。 除了Grid。*之外的任何設置器都可以使用，並且可以通過我的代碼和活動屬性窗口看到正在應用的樣式。

我知道還有其他方法可以完成我要做什么，我可能會做其中之一，但是我想知道這里正在發生什么。 我將發布頁面示例以及應用樣式的命令：

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>