Uri London
Uri London

Reputation: 10797

Setting the width of an element by the parent control (and not by the content)

Consider the following User Control, a somewhat simplified version of my conversation control. I'm having troubles fixing the width of the text block control (that contains the content of the conversation) to the with of the container control. What I get is a TextBlock control which doesn't wrap.

If I hard set the width of the TextBlock control, or the containing DockPanel (e.g. replace the DockPanel with the one in comment) everything is better, although I'll have to also add a converter to subtract the margin.

I've seen many similar question, including in this site, but no definite answer. The {Binding} to the ActualWidth of the parent element seems awkward to me.

<UserControl 
    x:Class="Bar.View.test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="240"
    >
    <UserControl.Resources>
        <XmlDataProvider x:Key="Conversation" XPath="Discussion">
            <x:XData>
                <Discussion xmlns="">
                    <msg speaker="Mark" picture="http://graph.facebook.com/4/picture?type=small">Hello</msg>
                    <msg speaker="Uri" picture="http://graph.facebook.com/526439429/picture?type=normal">Good Morning</msg>
                    <msg speaker="Mark" picture="http://graph.facebook.com/4/picture?type=small">The quick brown fox jumps over the lazy dog</msg>
                </Discussion>
            </x:XData>
        </XmlDataProvider>
    </UserControl.Resources>

    <ListBox x:Name="lb"
        ItemsSource="{Binding Source={StaticResource Conversation},XPath=*}"
        HorizontalContentAlignment="Stretch"
        >

        <ListBox.ItemTemplate>
            <DataTemplate>
                <!-- <DockPanel LastChildFill="True" Width="{Binding ElementName=lb,Path=ActualWidth}"> -->
                <DockPanel LastChildFill="True">
                    <StackPanel DockPanel.Dock="Left" Orientation="Vertical" Width="40" Margin="2">
                        <Image Source="{Binding XPath=@picture}" />
                        <TextBlock Text="{Binding XPath=@speaker}" FontSize="8"/>
                    </StackPanel>

                    <Border BorderThickness="1" BorderBrush="Blue" CornerRadius="8" Padding="3" Margin="2" >
                        <TextBlock Text="{Binding XPath=.}" TextWrapping="Wrap" />
                    </Border>

                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</UserControl>

Upvotes: 0

Views: 459

Answers (1)

nemesv
nemesv

Reputation: 139748

I've created a repro with your code and in the listbox the horizontal scrollbar is visible that's why your TextBox doesn't warp because the listbox's ScrollViewer allows it to expand infinitely.

Try to set ScrollViewer.HorizontalScrollBarVisibility="Disabled" on the ListBox and it will wrap the text corrently.

Upvotes: 1

Related Questions