c# - 如何获得带有文本环绕的文本 block 以填充 View 框

Question

XAML 是一个包含项目列表的页面，位于 View 框内。目标是有一个部门名称，并在其下面有一段注释。我将 itemscontrol 的背景设置为红色，以便于查看它在页面中的填充方式。

<Grid >
    <Viewbox x:Name="slideViewBox">
        <ItemsControl x:Name="itemsControl" Background="Red" ItemsSource="{Binding JournalEntries}" Grid.IsSharedSizeScope="True">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="ParentGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" HorizontalAlignment="Left" Foreground="White" Text="{Binding Department}" FontSize="32"/>
                        <TextBlock x:Name="detailsTextBlock" Grid.Row="1" Foreground="White" Text="{Binding DetailedExplaination}" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="20" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Viewbox>
</Grid>

它生成的内容: 我理想中想要的是:

请注意，在第一张图片中，详细信息 TextBlock 根本没有自动换行，页面上的大量可用空间被浪费了。

我确实在 Size_Changed 事件处理程序中编写了一些代码，使我更接近我的目标，但并非完全如此。我手动使用 itemscontrol 宽度来强制文本换行。我只需要让它自动执行此操作，以便它看起来像第二张图片，就在页面加载时。

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var child = VisualTreeHelper.GetChild(slideViewBox, 0) as ContainerVisual;
    var scale = child.Transform as ScaleTransform;

    double pageheight = e.NewSize.Height;
    double pagewidth = e.NewSize.Width;
    double textHeight;
    double textWidth;

    textHeight = itemsControl.ActualHeight * scale.ScaleY;
    textWidth = itemsControl.ActualWidth * scale.ScaleX;

    if (textWidth == pagewidth)
    {
        itemsControl.Width = itemsControl.ActualWidth * .9;
    }
    else if (textHeight == pageheight)
    {
        itemsControl.Width = itemsControl.ActualWidth * 1.1;
    }
}

Answer 1

我采用了@user3284736 对内部内容应用固定宽度的想法，并将其扩展。

首先，向 View 模型添加属性“ContainerWidth”，并通过处理 View 的 SizeChanged 事件来保持更新:

public MyUserControl()
{
    SizeChanged += OnSizeChanged;
}

void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
    ViewModel.ContainerWidth= e.NewSize.Width;
}

现在将项目模板的容器(示例中的“ParentGrid”)的宽度绑定(bind)到整个容器的大小:

<Grid x:Name="ParentGrid" 
      Width="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl},Path=DataContext.ContainerWidth}">

设置固定大小具有强制文本在 ViewBox 应用其缩放之前换行的效果。

编辑 这是我用来测试的 XAML:

<Grid x:Name="LayoutRoot" Background="Red">
    <Viewbox Stretch="Fill" StretchDirection="Both">
        <ItemsControl x:Name="itemsControl" ItemsSource="{Binding JournalEntries}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="ParentGrid" 
                          Width="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl},Path=DataContext.ContainerWidth}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" HorizontalAlignment="Left" Foreground="White" Text="{Binding Department}" 
                                   FontSize="32"/>
                        <TextBlock x:Name="detailsTextBlock" Grid.Row="1" Foreground="White" Text="{Binding DetailedExplanation}" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="20" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Viewbox>
</Grid>