How to bind a WrapPanel's items with different width to respective Grid's ColumnWidth??

Question

I have a Grid which has two columns. Inside the grid there will be WrapPanel which starts from column 0 and has columnspan of 1. This WrapPanel has two children. I want one children's width to be the width of col0 and other to be the width of col1. I have
tried something(code below) but it is not working.[Initially I implemented this without wrappanel that is my grid will have two columns,one column takes 60% of the total width and also has minimum width, other column  takes 40% of the total width.So everything
is fine.But when I resize my window I want the second column to get wrapped to the bottom of the 1st column.So I added wrappanel].
The following code explains well:
<Grid Grid.Row="1" Margin="0,20,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="6*"></ColumnDefinition>
                                <ColumnDefinition Width="4*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2"  HorizontalAlignment="Left" VerticalAlignment="Top">
                                <StackPanel Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
           <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
                                       <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
                                <StackPanel Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
                                    <TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
                                    <Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
                                </StackPanel>
                            </WrapPanel>
 </Grid>

Answer 1

Why don't you just remove the WrapPanel and set the Grid.Column attached properties of the StackPanels?:
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
<StackPanel Grid.Column="1" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
<TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
<Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
</Grid>
I am afraid that it makes no sense to define two ColumnDefinitions if you just put a single element with the Grid.ColumnSpan property set to 2 in the Grid. This effetively makes the WrapPanel span the two columns and then there is only a single column...You
might as well put the Grid inside the WrapPanel then:
<WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
<StackPanel Grid.Column="1" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
<TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
<Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
</Grid>
</WrapPanel>
There is also a SharedSizeGroup property that you can set if you are adding several Grids to the WrapPanel and want the columns of all Grids to have a common width:
https://msdn.microsoft.com/en-us/library/system.windows.controls.definitionbase.sharedsizegroup(v=vs.110).aspx
<WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" SharedSizeGroup="a"></ColumnDefinition>
<ColumnDefinition Width="4*" SharedSizeGroup="b"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" SharedSizeGroup="a"></ColumnDefinition>
<ColumnDefinition Width="4*" SharedSizeGroup="b"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</WrapPanel>
Please remember to close your threads by marking helpful posts as answer.