通过VisualStates重新定位RelativePanel中的子项

Question

我有一个包含一群孩子的Relative Panel。我想在VisualStates中通过AdoptiveTrigger改变孩子的位置。问题是，当我想要将一个元素的位置从其他元素的下方更改到该元素的右侧时，我必须删除下面附加属性的值，然后设置RightOf属性才能使其工作，否则会导致应用程序崩溃。现在我想知道如何删除下面的值？我尝试在属性窗口中为每个状态a.reset绑定，然后将我的值b.setting该值赋给空字符串，如""；c.Ignoring该属性。这些都不起作用！请帮帮我!

Answer 1

可以将附加的属性RelativePanel.Below设置为empty。除此之外，我们还可以通过设置AlignTopWith或AlignVerticalCenterWith属性来解决这个问题。

这是因为AlignTopWith的优先级高于Below，并且对于AlignVerticalCenterWith属性，如果没有冲突就会应用它。作为我的测试，AlignVerticalCenterWith的优先级也高于Below。

有关更多信息，请参阅RelativePanel类中的部分。

以下是我用来测试的示例：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="BlueRect.(RelativePanel.Below)" Value="" />
                    <Setter Target="GreenRect.(RelativePanel.RightOf)" Value="BlueRect" />
                    <Setter Target="GreenRect.(RelativePanel.Below)" Value="RedRect" />
                    <!--<Setter Target="GreenRect.(RelativePanel.AlignVerticalCenterWith)" Value="BlueRect" />-->
                    <!--<Setter Target="GreenRect.(RelativePanel.AlignTopWith)" Value="BlueRect" />-->
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <RelativePanel>
        <Rectangle x:Name="RedRect"
                   Width="100"
                   Height="100"
                   Fill="Red" />
        <Rectangle x:Name="BlueRect"
                   Width="100"
                   Height="200"
                   Fill="Blue"
                   RelativePanel.Below="RedRect"
                   RelativePanel.RightOf="RedRect" />
        <Rectangle x:Name="GreenRect"
                   Width="100"
                   Height="100"
                   Fill="Green"
                   RelativePanel.Below="BlueRect"
                   RelativePanel.RightOf="RedRect" />
    </RelativePanel>
</Grid>

它的工作原理如下：

​

Answer 2

你可以做到

<Setter Target="SomeElement.(RelativePanel.Below)" Value="{x:Null}" />