如何在ScrollViewer（WP7）中執行RenderTransform？

Question

我已經嘗試了許多方法來在ScrollViewer（Windows Phone 7 Silverlight）中管理RenderTransform，但是在我看來現在幾乎是不可能的。 我得到的是在ScrollViewer中具有其大小的Grid，我想通過RenderTransform從代碼更改網格的內容大小，因為它什么也不做！

      <ScrollViewer x:Name="scrollViewer" Width="800" Height="480" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
        <Grid x:Name="grid" Width="1600" Height="960" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Grid.RenderTransform>
                <CompositeTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1"/>
            </Grid.RenderTransform>
            <Image x:Name="backgroundImage" Source="/Images/backgrounds/Happy rainbow.png" Stretch="Fill"/>
        </Grid>
    </ScrollViewer>

在代碼中：

        private void button_Click(object sender, RoutedEventArgs e)
    {
            (grid.RenderTransform as CompositeTransform ).CenterX = 0;
            (grid.RenderTransform as CompositeTransform ).CenterY = 0;
            (grid.RenderTransform as CompositeTransform ).ScaleX = 0.5;
            (grid.RenderTransform as CompositeTransform ).ScaleY = 0.5;
            grid.UpdateLayout();
    }

縮放和視覺狀態綁定也不會顯示。 非常感謝您的幫助。

Answer 1

更好的主意...將網格內容放入ItemsControl，然后在ItemsControl上執行ScaleTransform。

<Grid>
    <ItemsControl x:Name="ContentScaler">
        <Image x:Name="backgroundImage" Source="/Images/backgrounds/Happy rainbow.png" Stretch="Fill"/>
    </ItemsControl>
</Grid>

然后在代碼背后

ContentScaler.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5, CenterX = 0, CenterY = 0 };

根據您可能需要執行的其他操作，您可能需要執行諸如將WrapPanel設置為ItemsPanelTemplate和/或在縮放時調整ItemsControl的大小之類的操作。 可能會有些棘手，但是希望這可以使您指向正確的方向。

恕我直言，在Silverlight中使用Grid也會被過度使用，除非需要將內容分解為表格類型的布局。 畫布可能更適合您的工作。

Answer 2

我不確定這是否正是您需要的，但是如果您插入這樣的額外網格...

            <ScrollViewer Grid.Row="1" x:Name="scrollViewer"
                      Width="800"
                      Height="480"
                      HorizontalScrollBarVisibility="Visible"
                      VerticalScrollBarVisibility="Visible">
            <Grid x:Name="grid"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top">
                <Grid
                    Width="1600"
                    Height="960">
                    <Grid.RenderTransform>
                        <CompositeTransform x:Name="scaleTransform"
                                            ScaleX="1"
                                            ScaleY="1" />
                    </Grid.RenderTransform>
                    <Image x:Name="backgroundImage"
                           Source="ApplicationIcon.png"
                           Stretch="Fill" />
                    </Grid>
            </Grid>
        </ScrollViewer>

至少內容會按比例縮放。