Setting the width inside a DataTemplate

Question

I am using a HiearchicalDataTemplate to display items in a tree view. I want a progress bar to appear on the third level of the tree view. The Name of the item should be at the left and the progress bar should be at the extreme right. This is what i have tried so far.

<UserControl.Resources>
<HierarchicalDataTemplate x:Key="Level3"
                              ItemsSource="{Binding EquipmentCollection}"
                              ItemTemplate="{StaticResource Level4}">
        <DockPanel HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding GroupName}" DockPanel.Dock="Left"/>
            <ProgressBar x:Name="GrpProgress" Width="400" Margin="0,5,0,0" DockPanel.Dock="Right" 
            </ProgressBar>
        </DockPanel>
    </HierarchicalDataTemplate>
    <HierarchicalDataTemplate x:Key="Level2"
                              ItemsSource="{Binding FamilyMembers}"
                              ItemTemplate="{StaticResource Level3}">
        <TextBlock Text="{Binding FamilyName}"/>
    </HierarchicalDataTemplate>

    <HierarchicalDataTemplate x:Key="Level1"
                              ItemsSource="{Binding SelectedFamilies}"
                              ItemTemplate="{StaticResource Level2}">
        <TextBlock Text="{Binding Name}"/>
    </HierarchicalDataTemplate>
</UserControl.Resources>

<TreeView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" x:Name="FamilyTreeView" Background="WhiteSmoke" 
          ItemsSource="{Binding SelectedItems}" ItemTemplate="{StaticResource Level1}" HorizontalContentAlignment="Stretch">
</TreeView>

But, the progress bar starts right after where the Group Name ends. Any help would be appreciated.

Answer 1

The Progressbar fills out the rest of the DockPanel. Put a third invisible something into the DockPanel without an attached property DockPanel.Dock. This causes the Progressbar to be on the right side.