Bind Width property of elements which are horizontally stretched

Question

I have a group box and grid splitter control in a column of the grid. Horizontal Alignment of group box is set to stretch so it occupies all the space when I drag the splitter. All works well.

Now I need to store the value of the group box in a property of the bound object but as soon as I bind the width property it gets stuck it is no longer stretching itself upon stretching the splitter.

I know the reason because now the binded property is responsible for its width and it is not getting changed. But don't know how to make it work. This is my XAML.

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Grid x:Name="InnerGrid" HorizontalAlignment="Stretch" Height="{Binding ElementName=Control1,Path=ActualHeight}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="200"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <GroupBox Header="{Binding TrackName}" VerticalAlignment="Stretch" Margin="3 0 3 0" HorizontalAlignment="Stretch" />
            <GridSplitter Width="5" VerticalAlignment="Stretch" Focusable="False" Background="Gray"/>
        </Grid>
    </DataTemplate>
</ItemsControl.ItemTemplate>

You need to somehow push `GroupBox.ActualWidth` back to your object/viewmodel. One might think a `OneWayToSource` binding would do the job, but sadly you can't set *any* binding on a read-only DependencyProperty (ActualWidth). See these two answers for work-arounds: http://stackoverflow.com/a/7227295/1869660 ..and http://stackoverflow.com/a/1083733/1869660 — Sphinxxx, Jan 05 '15 at 18:35
Your issue is not clear enough.. I see in your code ItemsControl Template and DataTemplate.. I suspect you are over-simplifying the explanation to the issue you encounter in your question. — G.Y, Jan 12 '15 at 19:29

Sam FarajpourGhamari · Answer 1 · 2015-01-05T07:40:13.663

As I understand you need read calculated width of the GroupBox. You can use ActualWidth property for this purpose.

Edit: You can write custom GroupBox and make use of Dependency Properties:

public class MyGroupBox : GroupBox
{
    public static readonly DependencyProperty CurrentWidthProperty =
        DependencyProperty.Register("CurrentWidth", typeof(double),
        typeof(MyGroupBox), new FrameworkPropertyMetadata(0d));

    public double CurrentWidth
    {
        get { return this.ActualWidth; }
        set { SetValue(CurrentWidthProperty, value); }
    }
}

XAML:

<Window x:Class="FunWithWpfAndXP.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:FunWithWp"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="200"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <local:MyGroupBox CurrentWidth="{Binding Path=myProp}" VerticalAlignment="Stretch" Margin="3 0 3 0" HorizontalAlignment="Stretch"/>
        <GridSplitter Width="5"  VerticalAlignment="Stretch"  Focusable="False" Background="Gray"/>
    </Grid>
</Window>

That I know I could bind the width property of group box with actualwidth property of grid but then how could I get the group box width in my object's property which is the main concern here. — Manvinder, Jan 04 '15 at 20:25

score 0 · Accepted Answer · answered Jan 08 '15 at 18:17

0

Perhaps you're actually interested in binding the ColumnDefinition width, as so:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="{Binding Width}" MinWidth="200"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

answered Jan 08 '15 at 18:17

Erti-Chris Eelmaa

25,338
6
61
78

score 0 · Answer 3 · answered Jan 12 '15 at 19:10

0

The problem is that your binding is resetting the width changed by the GridSplitter, setting the Mode of the GroupBox Width binding to OneWayToSource should (probably) help you, you'll probably get something like this:

<GroupBox Width="{Binding Path=MyGroupBoxWidth, Mode=OneWayToSource}"/>

MSDN:

OneWayToSource: Updates the source property when the target property changes.

Setting this will cause that the property in your code will be updated but not the other way around

answered Jan 12 '15 at 19:10

grabthefish

962
14
30

Mode one way to source is not going to help me because what is the point of saving width if I cant use in future. My group box should have the default width which is being stored in the object. – Manvinder Jan 14 '15 at 15:35

Bind Width property of elements which are horizontally stretched

3 Answers3