Binding DataGridTemplateColumn.Width property to slider

Question

I am trying to bind the width of a DataGridTemplateColumn to a slider to adjust the column's width.

When there are other columns so that a horizontal scroll bar is shown, the sizing of the column has no effect. Here is working sample code:

<Window x:Class="WpfApplication1.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>
        <x:Array x:Key="strings" Type="sys:String" 
            xmlns:sys="clr-namespace:System;assembly=mscorlib">
            <sys:String>One</sys:String>
            <sys:String>Two</sys:String>
        </x:Array>
    </Window.Resources>
    <StackPanel>
        <Slider Name="ImgWidth" Minimum="10" Maximum="500" TickFrequency="1" IsSnapToTickEnabled="True" Value="100"></Slider>

          <DataGrid ItemsSource="{StaticResource strings}" CanUserAddRows="False" CanUserDeleteRows="False" IsSynchronizedWithCurrentItem="True" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="Image" Width="{Binding ElementName=ImgWidth, Path=Value}" >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Red" BorderThickness="5" Height="100" Width="{Binding ElementName=ImgWidth, Path=Value}"></Border>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

                <DataGridTextColumn Header="Something else" Binding="{Binding}"/>
                <DataGridTextColumn Header="Something else" Binding="{Binding}"/>
                <DataGridTextColumn Header="Something else" Binding="{Binding}"/>
                <DataGridTextColumn Header="Something else" Binding="{Binding}"/>
                <DataGridTextColumn Header="Something else" Binding="{Binding}"/>
                <DataGridTextColumn Header="Something else" Binding="{Binding}"/>

                <DataGridTemplateColumn Width="*" />
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</Window>

Resizing of image works when moving the slider, however whether I have set the Width of the first column to auto or to the binding, it does not scale in both directions when I move the slider. When the horizontal scrollbar is not visible then increasing the width works but shrinking doesn't. When horizontal scrollbar is shown, resizing the column does not work in any direction.

Answer 1

This seems to work. Not very beautiful but it works.

Slider x:Name="ImgWidth" Minimum="10" Maximum="500" TickFrequency="1" IsSnapToTickEnabled="True" Value="100" ValueChanged="ImgWidth_ValueChanged">

DataGrid x:Name="dg" ...

and in code:

    private void ImgWidth_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        if (dg != null)
        {
            dg.Columns[0].Width = ImgWidth.Value;
        }
    }