ScrollViewer с сеткой, которая имеет масштабное преобразование

Question

Итак, у меня есть сетка> холст> изображение, которое я разместил внутри scrollviewer.

Я разместил RenderTransform> ScaleTransform в Grid и использую mousewheel событие над ним, чтобы масштабировать его.

Когда я использую его, он включает и уменьшает масштаб, но scrollviewer сохраняет первоначальную настройку, которая кажется мне, что фактическая ширина и высота не меняются, когда я масштабируюсь (что я не хочу менять в любом случае).

Идея, которую я хочу, состоит в том, чтобы масштабировать диапазон scrollviewer также тем же процентом, что и сетка, связывающая масштабированную ширину и масштабированную высоту.

Я изучал класс ScrollViewer в MSDN и не могу найти, где сохранен диапазон scrollviewer. Я смотрю на ExtentHeight и ExtentWidth, на ScrollableHeight и ScrollableWidth, но я как бы рылся в темноте.

Как я могу программно получить пиксельный/числовой диапазон горизонтальных и вертикальных полос scrollViewer? Как я могу их изменить? Я хочу сделать это на событии мыши в сетке.

Какова практическая разница между: ViewportWidth, ExtentWidth, ScrollableWidth, Width?

XAML:

<ScrollViewer Grid.Row="0" Grid.Column="1" Name="sourcePicScroll" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Height="Auto" Width="Auto"> 
     <Grid Name="sourceGrid" Background="Gray" MouseWheel="sourceGrid_MouseWheel"> 
      <Grid.RenderTransform> 
       <ScaleTransform x:Name="sourceGridScaleTransform"/> 
      </Grid.RenderTransform> 
      <Canvas Name="sourceCanvas" Width="0" Height="0" Background="White" MouseMove="sourceCanvas_MouseMove" PreviewMouseLeftButtonDown="sourceCanvas_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="sourceCanvas_PreviewMouseLeftButtonUp" HorizontalAlignment="Left" VerticalAlignment="Top" MouseWheel="sourceCanvas_MouseWheel"> 
       <Canvas.RenderTransform> 
        <ScaleTransform x:Name="sourceScaleTransform"/> 
       </Canvas.RenderTransform> 
       <Image Name="sourcePic" HorizontalAlignment="Left" VerticalAlignment="Top" Panel.ZIndex="1" Stretch="None"></Image> 
       <Rectangle Name="sourceSelectionBox" Visibility="Collapsed" Stroke="Black" StrokeThickness="1" Panel.ZIndex="50"/> 
       <Ellipse Name="sourceSelectionEllipse" Visibility="Collapsed" Stroke="Black" StrokeThickness="1" Panel.ZIndex="51"/> 
      </Canvas> 
     </Grid> 
    </ScrollViewer> 

C# код:

double ScaleRate = 1.1; 
     if (e.Delta > 0) 
     { 
      sourceGridScaleTransform.ScaleX *= ScaleRate; 
      sourceGridScaleTransform.ScaleY *= ScaleRate; 
     } 
     else 
     { 
      sourceGridScaleTransform.ScaleX /= ScaleRate; 
      sourceGridScaleTransform.ScaleY /= ScaleRate; 
     } 

Answer 1

Две проблемы

1. Рендер преобразования применяются только к визуализации, которая не влияет на расположение, следовательно, прокручивать зрителя не отражает то же самое
2. Холст не имеет размера, de ошибки 0, поэтому применение преобразования не влияет на размер холста, если на холсте не указан размер.

Поскольку вы не используете никаких свойств холста для детей, вы можете безопасно удалить их, если это необходимо.

, так что вы можете попробовать этот образец

<ScrollViewer Grid.Row="0" 
       Grid.Column="1" 
       Name="sourcePicScroll" 
       VerticalScrollBarVisibility="Visible" 
       HorizontalScrollBarVisibility="Visible" 
       Height="Auto" 
       Width="Auto"> 
    <Grid Name="sourceGrid" 
      HorizontalAlignment="Left" 
      VerticalAlignment="Top" 
      Background="Gray" 
      MouseWheel="sourceGrid_MouseWheel"> 
     <Grid.LayoutTransform> 
      <ScaleTransform x:Name="sourceGridScaleTransform" /> 
     </Grid.LayoutTransform> 
     <Image Name="sourcePic" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" 
       Panel.ZIndex="1" 
       Source="pr.png" 
       Stretch="None"></Image> 
     <Rectangle Name="sourceSelectionBox" 
        Visibility="Collapsed" 
        Stroke="Black" 
        StrokeThickness="1" 
        Panel.ZIndex="50" /> 
     <Ellipse Name="sourceSelectionEllipse" 
       Visibility="Collapsed" 
       Stroke="Black" 
       StrokeThickness="1" 
       Panel.ZIndex="51" /> 
    </Grid> 
</ScrollViewer> 

изменения

• RenderTransform в LayoutTransform

• добавил HorizontalAlignment = "Left" & VerticalAlignment = "Top" в сетке

• удален внутренний холст

дать ему попробовать и посмотреть, если это то, что вы ищете, обратите внимание, что колесо мыши будет работать только на внутренней сетке.

здесь представляет собой модифицированный образец, если вам нужен свиток, чтобы работать на полном просмотре с прокруткой

<Grid> 
    <ScrollViewer Grid.Row="0" 
        Grid.Column="1" 
        Name="sourcePicScroll" 
        VerticalScrollBarVisibility="Visible" 
        HorizontalScrollBarVisibility="Visible" 
        Height="Auto" 
        Width="Auto"> 
     <Grid Name="sourceGrid" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" 
       Background="Gray"> 
      <Grid.LayoutTransform> 
       <ScaleTransform x:Name="sourceGridScaleTransform" /> 
      </Grid.LayoutTransform> 
      <Image Name="sourcePic" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        Panel.ZIndex="1" 
        Source="pr.png" 
        Stretch="None"></Image> 
      <Rectangle Name="sourceSelectionBox" 
         Visibility="Collapsed" 
         Stroke="Black" 
         StrokeThickness="1" 
         Panel.ZIndex="50" /> 
      <Ellipse Name="sourceSelectionEllipse" 
        Visibility="Collapsed" 
        Stroke="Black" 
        StrokeThickness="1" 
        Panel.ZIndex="51" /> 

     </Grid> 
    </ScrollViewer> 
    <Grid MouseWheel="sourceGrid_MouseWheel" 
      Background="Transparent"></Grid> 
</Grid>