Question

我正在尝试根据窗口宽度调整文本块的图像和FontSize。我的代码如下所示：

<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Default" >
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="340" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="ChannelImage.Height" Value="80" />
                            <Setter Target="ChannelImage.Width" Value="80" />
                            <Setter Target="CategoryTitle.FontSize" Value="16" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <RelativePanel Margin="5,5,5,5">
                <Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
                <TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
                           Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
            </RelativePanel>
        </Grid>
</DataTemplate>

这是我遇到的问题。

我尝试使用宽度超过340的分辨率的不同手机模拟器，但ChannelImage简单的分辨率不能扩展到80x80 epx。
我也试过运行程序的桌面版。一旦我开始调整窗口大小，它就会扩展到80x80但不会扩展到80x80，并且随着窗口的进一步扩大而继续增长。

如果有人能指出我做错了什么，我真的很感激。

Answer 1

您需要将您的datatemplate包装在UserControl中，如下所示：

<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
    <UserControl>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Default" >
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="340" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="ChannelImage.Height" Value="80" />
                            <Setter Target="ChannelImage.Width" Value="80" />
                            <Setter Target="CategoryTitle.FontSize" Value="16" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <RelativePanel Margin="5,5,5,5">
                <Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
                <TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
                           Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
            </RelativePanel>
        </Grid>
    </UserControl>
</DataTemplate>

UWP自适应UI代码无法按预期工作

1 个答案: