Click here to Skip to main content
16,017,788 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
Posted
Updated 23-Jan-19 4:35am
v2

1 solution

Try binding the scrollviewer control's width and height to the actualwidth and actualheight of the parent grid.
 
Share this answer
 
Comments
hamid18 23-Jan-19 13:45pm    
still getting same output.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900