WPF RowDetailsTemplate width issue

Question

Apologies if this is a dupe, but I can't seem to find a rational solution for what must be a fairly simple issue.

<Window x:Class="FeedTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <XmlNamespaceMappingCollection x:Key="map">
        <XmlNamespaceMapping Prefix="media" Uri="http://search.yahoo.com/mrss/" />
    </XmlNamespaceMappingCollection>

    <XmlDataProvider x:Key="newsFeed" XPath="//item[string-length(title)>0]" Source="http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/uk/rss.xml" />

    <DataTemplate x:Key="rowDetailTemplate">
        <Border BorderThickness="2">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding XPath=media:thumbnail/@url}" Width="66" Height="49" />
                <StackPanel Orientation="Vertical" Margin="5">
                    <TextBlock Text="{Binding XPath=description}" TextWrapping="Wrap" />
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>

    <Style TargetType="{x:Type DataGrid}">
        <Setter Property="GridLinesVisibility" Value="None" />
    </Style>
</Window.Resources>

<Grid Binding.XmlNamespaceManager="{StaticResource map}">
    <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Source={StaticResource newsFeed}}" RowDetailsVisibilityMode="VisibleWhenSelected" RowDetailsTemplate="{StaticResource rowDetailTemplate}">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Title" Binding="{Binding XPath=title}" MinWidth="150" Width="*" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>

The attached XAML gets a news feed, and displays the title of each item in a DataGrid. Selecting an item shows the RowDetailsTemplate which is where my problem lies - why does the RowDetailsTemplate expand beyond the width of the containing DataGrid (thus forcing a horizontal scrollbar), and more importantly, how do I stop it doing this?

Many thanks.

Answer 1

I had this problem as well. Seems that if you allow the grid to have a horz scroll bar, and the details view doesn't have a fixed width, the grid gives the details view a default width that is too wide.

I solved it by setting the grid HorizontalScrollBarVisibility property to "Disabled".

I also had a grid in my details template and disabled the horz scroll bar there as well. Without that, the grid in the details came up with a horz scroll bar (with almost no travel). As soon as something invalidated the details, it would redraw without the scroll bar. Annoying.

If you need/want a horizontal scroll bar in the main grid, I think you would need to resort to a binding of the details Width to the main grid's ActualWidth.