1

我尝试在嵌入在翻转视图中的用户控件中使用 VisualStateManager。但是下面的代码不起作用，尽管它看起来确实像使用 RelativePanel 构建自适应布局中提到的那样

   <UserControl
        x:Class="JintekiArchives.Views.CardDetailsControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:JintekiArchives"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">

        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
                    <VisualState x:Name="VisualStateNarrow">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
                            <Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="VisualStateNormal">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="521" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
                            <Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="VisualStateWide">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="1200" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="descriptionPanel.(RelativePanel.RightOf)" Value="imageBorder" />
                            <Setter Target="textPanel.(RelativePanel.RightOf)" Value="descriptionPanel" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <RelativePanel Margin="20">
                <RelativePanel.Background>
                    <ImageBrush x:Name="backgroundGrid" ImageSource="{Binding FactionImage}" Opacity="0.1" />
                </RelativePanel.Background>
                <StackPanel x:Name="titlePanel" Orientation="Horizontal" Margin="24"
                        RelativePanel.AlignTopWithPanel="True" 
                        RelativePanel.AlignLeftWithPanel="True" 
                        RelativePanel.AlignRightWithPanel="True">
                    <TextBlock FontSize="48" FontWeight="SemiBold" Text="{Binding Title}"></TextBlock>
                </StackPanel>
                <StackPanel Name="imageBorder" Width="300" Height="420" Margin="24, 24"
                        RelativePanel.Below="titlePanel" 
                        RelativePanel.AlignLeftWithPanel="True" 
                        RelativePanel.AlignRightWithPanel="false">
                    <Image Source="{Binding ImageSrc}" Stretch="None"/>
                </StackPanel>
                <StackPanel Name="descriptionPanel" Orientation="Vertical" Margin="24, 24"
                        RelativePanel.AlignTopWith="imageBorder" 
                        RelativePanel.RightOf="imageBorder">
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock>
                            <Run FontWeight="Bold" Text="Faction : "></Run>
                            <Run Text="{Binding Faction}"></Run>
                        </TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock>
                            <Run FontWeight="Bold" Text="Set : "></Run>
                            <Run Text="{Binding Set}"></Run>
                        </TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock>
                            <Run FontWeight="Bold" Text="Type : "></Run>
                            <Run Text="{Binding Type}"></Run>
                        </TextBlock>
                    </StackPanel>
                </StackPanel>
                <StackPanel Name="textPanel" Orientation="Vertical" Margin="24,24"
                        RelativePanel.AlignTopWith="imageBorder" 
                        RelativePanel.RightOf="descriptionPanel">
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" Text="{Binding Text}"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontStyle="Italic" Text="{Binding Flavor}">
                        </TextBlock>
                    </StackPanel>
                    <StackPanel Padding="5" Orientation="Horizontal" Margin="5">
                        <TextBlock>
                            <Run Text="Illustrated by "></Run>
                            <Run Text="{Binding Illustrator}"></Run>
                        </TextBlock>
                    </StackPanel>
                </StackPanel>
            </RelativePanel>
        </Grid>
    </UserControl>
4

1 回答 1

0

这里的问题与布局中的冲突关系有关。RelativePanel

如果您设置多个关系以元素的同一边缘为目标，那么您的布局中可能会出现冲突的关系。发生这种情况时，将按以下优先级顺序应用关系：

面板中心对齐属性（AlignVerticalCenterWith，AlignHorizo​​ntalCenterWithPanel，...）通常独立于其他约束使用，如果没有冲突则应用。

UI 元素上的Horizo​​ntalAlignment和VerticalAlignment属性在评估和应用关系属性后应用。如果所需尺寸小于可用尺寸，这些属性控制元素在可用尺寸内的放置。

所以 的优先级AlignTopWith高于Below。在您的代码中，您已设置RelativePanel.AlignTopWith为imageBorderindescriptionPanel和textPanel. 因此，像descriptionPanel.(RelativePanel.Below)in这样的设置VisualState将不起作用。

要解决此问题，我建议您删除 和 中的附加属性，RelativePanel然后descriptionPanel将textPanel这些附加属性设置为VisualState不使用AlignTopWith.

由于我不确定您想要的布局是什么，所以在这里我只使用两种视觉状态，例如：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
        <VisualState x:Name="VisualStateNarrow">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
                <Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateWide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="1200" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="titlePanel" />
                <Setter Target="descriptionPanel.(RelativePanel.RightOf)" Value="imageBorder" />
                <Setter Target="textPanel.(RelativePanel.Below)" Value="titlePanel" />
                <Setter Target="textPanel.(RelativePanel.RightOf)" Value="descriptionPanel" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
于 2016-04-19T13:00:10.330 回答