如何防止TextBlock占用所有可用空间

时间:2019-06-11 11:00:31

标签: c# wpf

这是我的问题。我建立了以下ListView

<ListView Grid.Row="1" x:Name="messageList" BorderThickness="0"
                  ItemsSource="{Binding MySource}" 
                  HorizontalContentAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="5*"/>
                    </Grid.ColumnDefinitions>
                    <WrapPanel Grid.Row="0" Grid.Column="0">
                        <TextBlock  Margin="2" 
                                VerticalAlignment="Center" 
                                Text="{Binding Received.SenderId}" 
                                />
                        <TextBlock  Margin="2" 
                                VerticalAlignment="Center" 
                                Text="{Binding Received.DeliverDate}" 
                               />
                    </WrapPanel>

                    <TextBlock Margin="2" 
                                VerticalAlignment="Center" 
                                Text="{Binding Received.MsgText}"
                                Grid.Row="1" Grid.Column="0"
                                TextWrapping="WrapWithOverflow">

                    </TextBlock>

                    <WrapPanel Grid.Row="0" Grid.Column="1">
                        <TextBlock  Margin="2" 
                                VerticalAlignment="Center" 
                                Text="{Binding Sent.SenderId}" 
                                />
                        <TextBlock  Margin="2" 
                                VerticalAlignment="Center" 
                                Text="{Binding Sent.DeliverDate}" 
                                />
                    </WrapPanel>

                    <TextBlock Margin="2" 
                                VerticalAlignment="Center" 
                                Text="{Binding Sent.MsgText}"
                                Grid.Row="1" Grid.Column="1"
                                TextWrapping="WrapWithOverflow">

                    </TextBlock>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

对于MySource的每个元素,“已接收”和“已发送”之间仅1不为空。 ListView工作正常,将元素放在屏幕的左侧或右侧,但是包含TextBlock的{​​{1}}获得了所有可用空间(因此整行),如果消息太长。我如何限制它只保留在父网格的一半中,并最终使文本溢出?

编辑:我添加了一张显示我的问题的图像。第四条消息应该溢出,但不会溢出

this is how it looks

2 个答案:

答案 0 :(得分:1)

我花了几分钟来制作mcve,但这个难题的缺失部分是:

<Grid MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">

这将限制所有Grid(每个项目都有一个)的最大宽度,然后进行包装。否则,Gridasking的宽度可以使整个项目适合一行,而ListView则可以,但是您将看到水平滚动条(包括我在内的用户最讨厌的控件)


MCVE:

public partial class MainWindow : Window
{
    public class Item
    {
        public string Received { get; set; }
        public string Sent { get; set; }
    }

    public List<Item> Items { get; }

    public MainWindow()
    {
        InitializeComponent();
        Items = new List<Item>
        {
            new Item { Received = "1111 111 11 111 11 1" },
            new Item { Received = "2222 2 22 2  2 222222222 2 222222 22222222 222222222222 2" },
            new Item { Sent = "333333333 3333333 333   33333 3  3 33 333333333 3333" },
            new Item { Received = "444444444444444 444 44444444444444 44  4 44444444444444444 4 4 4444444444 4 444   444444444444" },
        };
        DataContext = this;
    }
}

屏幕截图:

Xaml:

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Received}"
                           TextWrapping="WrapWithOverflow" />
                <TextBlock Grid.Column="1"
                           Text="{Binding Sent}"
                           TextWrapping="WrapWithOverflow" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

答案 1 :(得分:0)

问题是您的网格(和列的宽度)是针对列表中的每个元素计算的,因此它占用了尽可能多的空间。我提出了一个备份解决方案,但没有找到更好的解决方案,但是结果在那里。

这是将2个ListView放置在网格的2列中,然后将Received元素放在一个网格中,将Sent放在另一个网格中。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <ListView Grid.Column="0" x:Name="messageListReceived" BorderThickness="0"
              ItemsSource="{Binding MySource}" 
              HorizontalContentAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <WrapPanel Grid.Row="0">
                        <TextBlock  Margin="2" 
                                    VerticalAlignment="Center" 
                                    Text="{Binding Received.SenderId}" 
                        />
                        <TextBlock  Margin="2" 
                                    VerticalAlignment="Center" 
                                    Text="{Binding Received.DeliverDate}" 
                        />
                    </WrapPanel>

                    <TextBlock Margin="2" 
                               VerticalAlignment="Center" 
                               Text="{Binding Received.MsgText}"
                               Grid.Row="1"
                               TextWrapping="WrapWithOverflow">

                    </TextBlock>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <ListView Grid.Column="1" x:Name="messageListSent" BorderThickness="0"
              ItemsSource="{Binding MySource}" 
              HorizontalContentAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <WrapPanel Grid.Row="0">
                        <TextBlock  Margin="2" 
                                    VerticalAlignment="Center" 
                                    Text="{Binding Sent.SenderId}" 
                        />
                        <TextBlock  Margin="2" 
                                    VerticalAlignment="Center" 
                                    Text="{Binding Sent.DeliverDate}" 
                        />
                    </WrapPanel>

                    <TextBlock Margin="2" 
                               VerticalAlignment="Center" 
                               Text="{Binding Sent.MsgText}"
                               Grid.Row="1"
                               TextWrapping="WrapWithOverflow">

                    </TextBlock>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>