how to bind width of child element to width of parent element in silverlight

Question

I have a grid whose width is "1*". So the actual width decided at runtime I think. Within that grid I have another grid whose width I want to set to the runtime width of parent grid. How Can I do that in xaml through binding.

No need to do that. A grid automatically sizes its children, including child grids. And when you say you have a Grid whose width is `1*` you certainly mean a Grid Column, don't you? You may post your XAML to make clear what you're actually doing. — Clemens, Sep 18 '13 at 07:33

score 133 · Accepted Answer · answered Sep 26 '13 at 07:27

133

This will actually help you I guess

Width="{Binding ActualWidth, ElementName=parentElementName}"

This binds the width to the parent element or the element name provided

answered Sep 26 '13 at 07:27

Anobik

4,841
2
17
32

2

What is ActualWidth property which isn't suggested by intelIsense? – Alex Jul 20 '15 at 19:36
1

Binding the width to the parent widh seems to remove the ability to be able to update the contents via `ItemsSource`. See [the strange behaviour in this question](http://stackoverflow.com/questions/33136535/data-disappears-from-listview-after-assigning-new-data-to-itemssource). – user2609980 Oct 16 '15 at 15:06

Rudresh Bhatt · Answer 2 · 2017-11-25T05:10:34.673

52

This is generic solution which may work everywhere. You wouldn't need to write parent element name. This will identify its parent and will take parent's width.

Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}"

edited Nov 25 '17 at 05:10

answered Jul 14 '15 at 12:00

Rudresh Bhatt

1,935
2
23
29

score 28 · Answer 3 · answered Jan 23 '16 at 11:37

28

I think that easiest way to do same thing is:

HorizontalAlignment="Stretch"

That is not using binding as you have been asked, but it is easier.

answered Jan 23 '16 at 11:37

RockLegend

497
4
9

Much easier for my needs: put these into a grid, control widths with column definitions, HorizontalAlignment = Stretch, Profit. Thanks. – Jason P Sallinger Mar 11 '16 at 15:15
1

The drawback to this seems to be that a combination of column definitions like: ``, , and `` will not respect the middle column's lack of an Auto property – Zachary Canann Nov 01 '17 at 02:33
Worked well in a vertical stack panel in a grid cell. – Slion Mar 14 '21 at 15:19

score 6 · Answer 4 · edited Feb 04 '19 at 12:51

6

 Width="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type Parent}, Mode=FindAncestor}}"

if both controls DataContext is different.

edited Feb 04 '19 at 12:51

Mahbubur Rahman

4,961
2
39
46

answered Mar 28 '18 at 05:49

Gaurav Panwar

974
10
11

I get "Parent is not supported in a WPF project" – Master Azazel Jul 09 '18 at 15:25
Yes, Parent is not supported in WPF project, it's for silverlight. For WPF you can use actual parent control like UserControl, DataGrid and Window etc instead of Parent. – Gaurav Panwar Jul 23 '18 at 13:52

score 4 · Answer 5 · answered Dec 04 '16 at 12:26

If you are doing it in CodeBehind, this works for me. It has the added advantage that bindMe does not have to be a child of toMe:

public static void BindWidth(this FrameworkElement bindMe, FrameworkElement toMe)
{
  Binding b = new Binding();
  b.Mode = BindingMode.OneWay;
  b.Source = toMe.ActualWidth;
  bindMe.SetBinding(FrameworkElement.WidthProperty, b);
}

usage:

child.BindWidth(parent);

score 0 · Answer 6 · edited Jul 22 '21 at 03:22

0

HorizontalAlignment doesn't work for buttons in Xamarin, you can use HorizontalOptions instead

HorizontalOptions="Fill"

edited Jul 22 '21 at 03:22

Grigory Zhadko

1,484
1
19
33

answered Jul 20 '21 at 05:57

Ninad Kulkarni

61
1
11

Cinorid · Answer 7 · 2020-11-18T10:36:52.617

Use HorizontalContentAlignment="Stretch" on ListBox:

<ListBox HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="TestImage.png"/>
                <TextBlock HorizontalAlignment="Center" Text="Test Text"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

or if it is inside a Template use this:

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Image Width="{TemplateBinding Width}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="TestImage.png"/>
                <TextBlock HorizontalAlignment="Center" Text="Test Text"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

how to bind width of child element to width of parent element in silverlight

7 Answers7

Linked