Windows Phone 8 中的响应式 UI

Posted 2023-02-25

【中文标题】Windows Phone 8 中的响应式 UI

【英文标题】：Responsive UI in Windows Phone 8

【发布时间】：2015-01-07 11:32:34

【问题描述】：

我在尝试为 Windows Phone 8 开发响应式 UI 时遇到问题。

我有一个 ListBox，我希望包装内容的 StackPanel 始终具有相同的边距，与屏幕大小无关。

例如：分辨率为 480x800、Margin="10" 的屏幕中的 StackPanel 应具有 Height="780" 和 Width="460"。但是在 720x1080 的分辨率下，这个 StackPanel 应该有 Height="1060" 和 Width="700"。

我已经尝试过使用 MinWidth、MaxWidth、MinHeight 和 MaxHeight，但似乎没有任何效果。 高度始终根据 ListBox 内容确定，而不是根据屏幕大小。

很遗憾，我无法附上图片以便更好地理解。我希望我已经清楚了。

我的代码：

<ListBox Height="450" ItemsSource="Binding" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="12" HorizontalAlignment="Center" >
                <Border Background="Binding color" BorderBrush="#03a9f4" Height="62" Width="62" HorizontalAlignment="Left" >
                    <TextBlock Text="Binding provider" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Segoe WP SemiLight" FontSize="15" />
                </Border>
                <TextBlock Foreground="#323232" Text="Binding name" FontFamily="Segoe WP" FontSize="28" Margin="77,-60,0,0" />
                <TextBlock Foreground="#323232" Text="Binding number" FontFamily="Segoe WP Light" FontSize="17" Margin="77,-23,0,0"/>                                                            
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

如果有人能告诉我如何制作响应式 UI，我将不胜感激。

【参考方案1】：

我认为您正在寻找 Stretch 您的元素

<StackPanel Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <!-- content -->
</StackPanel>

msdn

【讨论】：

请注意，对齐默认为Stretch，因此只需删除它们也可以。

确实是一个解决方案。