I have two Canvas panels in ScrollViewer. One is the main canvas which is having a grid shape drawn on its back ground. Then I have two ItemsControl. The first ItemsControl is having Stackpanel as its ItemsPanel with Horizontal Orientation. The second ItemsControl is having Canvas as its Panel. On this canvas I am drawing Line objects in DataTemplate of Itemscontrol.There is PreviewMouseWheel event on this canvas. In the event handler I am zooming this canvas which is zooming the Line objects. The width of this canvas is binded to ViewModel property CanvasWidth. Also this will change the width of Outer Canvas as its width is also binded to ViewModel Property CanvasWidth. When the PreviewMouseWheel is fired, I am adding more grid lines on main Canvas. I have TextBlock over them as DataTemplate of ItemsSource. Before zooing, the content of last TextBlock was 14260. After zoomin it should remain 14260. but the step value of two consecutive TextBlock should be reduced. Right now I am not able to see the whole content through ScrollViewer. The step size is reduced which was desired but the new grid lines which are drawn cannot be seen throught Scrollviewer. i know there is content. but I am unable to acces it. The scrollviewer is not showing it. I tried to use Layouttransform instead of RenderTransform. It was giving me ugly output. With RenderTransform the zooming was perfect. The only problem was that I was not getting all the content of canvas. Also I tried to make the main outer canvas as custom Canvas by deriving it from Canvas Class.still it did not work.
here is the output picture https://imgur.com/a/7WTrBoc
this is zoomed output https://imgur.com/C7SCOSJ
What I have tried:
<Grid x:Name="grid1" >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ScrollViewer Name="scrollViewer" HorizontalScrollBarVisibility="Auto" Grid.Row="1" Grid.Column="3" Margin="10,10,0,10" >
<Canvas Name="back_canvas" Height="12000" Width="{Binding CanvasWidth}" Margin="0,0,10,0" >
<Canvas.Background>
<DrawingBrush TileMode="Tile" Viewport="0,0,40,40" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,50,50"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Gray" Thickness="1"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Canvas.Background>
<ItemsControl ItemsSource="{Binding TimeAxis}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="0,0,3,0" Width="37" Background="GreenYellow" >
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Lines}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="12000" Background="Transparent" Name="front_canvas"
PreviewMouseWheel="OnPreviewMouseWheel"
Width="{Binding CanvasWidth, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
</Line>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
</ScrollViewer>
</Grid>