How to prevent Grid's children from scaling?

Question

The ItemsControl is scaled using Slider . The problem is that the Thumb s and BorderThickness are scaled in the way that the BorderThickness become too thin and almost not visible or too thick. The same is with Thumb s.

How to prevent Thumb and BorderThickness from scaling while still allowing Grid to scale?

I thought maybe to use a Converter that will rescale Border 's thickness BorderThickness="{Binding ElementName=MyItemsControl, Converter={StaticResource descaleConverter}}" but the Converter is applied only once and not called more when ItemsControl is being scaled.

Any ideas?

      <ItemsControl ItemsSource="{Binding Segments}" x:Name="MyItemsControl">
            <ItemsControl.LayoutTransform>
                <ScaleTransform 
                    ScaleX="{Binding ElementName=scaleSlider,Path=Value}" />
            </ItemsControl.LayoutTransform>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Width="{Binding Duration}" Height="100">
                        <Grid Opacity="0">
                            <local:ResizeThumb Height="6" Cursor="SizeNS" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
                            <local:ResizeThumb Width="6" Cursor="SizeWE" VerticalAlignment="Stretch" HorizontalAlignment="Left" />
                            <local:ResizeThumb Width="6" Cursor="SizeWE" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
                        </Grid>
                        <Grid IsHitTestVisible="False">
                            <Border BorderThickness="1,1,1,0" BorderBrush="Black" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    <Slider
        x:Name="scaleSlider"            
        Value="1" Minimum="0.01" Maximum="4"
    />

Answer 1

I believe applying the inverse transform to the child grids of the DataTemplate will do what you want, or hopefully point you in the right direction.

<DataTemplate>
    <Grid Width="{Binding Duration}" Height="100">
        <Grid Opacity="0" LayoutTransform="{Binding ElementName=MyItemsControl, Path=LayoutTransform.Inverse}">
            <local:ResizeThumb Height="6" Cursor="SizeNS" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
            <local:ResizeThumb Width="6" Cursor="SizeWE" VerticalAlignment="Stretch" HorizontalAlignment="Left" />
            <local:ResizeThumb Width="6" Cursor="SizeWE" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
         </Grid>
         <Grid IsHitTestVisible="False"
               LayoutTransform="{Binding ElementName=MyItemsControl, Path=LayoutTransform.Inverse}">
             <Border BorderThickness="1,1,1,0" BorderBrush="Black" />
         </Grid>
    </Grid>
</DataTemplate>