如何获取带有文本包装的文本块以填充视图框

Question

XAML是一个页面，其中在Viewbox内具有项目列表。 目的是要有一个部门名称，并在其下有一段注释。 我将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

以下更改在我包含的简化示例中起作用（没有数据绑定，但这无关紧要）：

1. 更新视图框，将其VerticalAlignment设置为Top
2. 更新“内部”网格，将其VerticalAlignment设置为Stretch，并将其MaxWidth绑定到父级的ActualWidth（在我的示例中为Window ...不确定父级控件是什么-您必须指定x：Name在父母）

这不会在垂直方向拉伸所有内容，但是它确实使网格遵循了Window的宽度，并且确实包裹了文本。

有关绑定到父控件宽度的详细信息，请点击此处-https://stackoverflow.com/a/157780/3284736

<Window x:Class="StretchBoxWithWrapping.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" 
    x:Name="MyWindow"
    Height="350" 
    Width="525">
<Grid>
    <Viewbox x:Name="MyViewBox" VerticalAlignment="Top">
        <Grid x:Name="MyParentGrid" Background="Red" VerticalAlignment="Stretch"
              MaxWidth="{Binding ElementName=MyWindow,Path=ActualWidth}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" HorizontalAlignment="Left" Foreground="White" Text="Department A" FontSize="32"/>
            <TextBlock x:Name="detailsTextBlock" Grid.Row="1" Foreground="White" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="20"
                       Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. " />
        </Grid>
    </Viewbox>
</Grid>

Answer 2

我接受了@ user3284736的想法，即对内部内容应用固定宽度，并进行了扩展。

首先，向视图模型添加属性“ ContainerWidth”，并通过处理视图的SizeChanged事件来使其保持更新：

public MyUserControl()
{
    SizeChanged += OnSizeChanged;
}

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

现在，将项目模板的容器的宽度（示例中为“ ParentGrid”）绑定到整个容器的大小：

<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>