如何在旋转时更改堆叠面板宽度

Question

我正在尝试在堆叠面板中显示推文列表，我希望消息在可用屏幕宽度内换行(横向和纵向)

我已经将下面的堆栈面板放在一个列表框项目模板数据模板中

<StackPanel>

<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" />

<StackPanel Width="380">

<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28"/>

<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="20" />

<TextBlock Text="{Binding CreatedAt}" FontSize="12" Foreground="#FFC8AB14" />

</StackPanel>

</StackPanel>

当我将设备旋转到横向时，包含推文的堆叠面板仍然是width=380，如果我移除宽度，则消息文本块文本不再换行。

我是否需要保持堆叠面板的宽度，并在设备旋转时故意更改它，或者有什么方法可以让它适合屏幕宽度并换行到消息文本？

Answer 1

尝试对模板中的外部容器使用网格，而不是StackPanel。这样，您就可以定义一个要展开的列，以占用所有可用空间。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0" Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" />
    <StackPanel Grid.Column="1">
        <TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28"/>
        <TextBlock Text="{Binding Message}" FontSize="20" />
        <TextBlock Text="{Binding CreatedAt}" FontSize="12" Foreground="#FFC8AB14" />
    </StackPanel>
</Grid>

Answer 2

您必须附加到OrientationChanged事件

    public MainPage()
    {
        InitializeComponent();
        this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);
    }

    void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
    {
        myStackpanel.Width = 100;
    }