如何在uwp中缩放文本和图像？

Question

我想缩放文字和图片内容。我希望得到类似的输出：

但结果是这样的：

我的代码如下。问题是什么？

  <UserControl.Resources>
        <DataTemplate x:Key="ImageTemplate" x:DataType="model:NoteBlock">    
            <Grid>
                <Viewbox Stretch="UniformToFill" StretchDirection="Both" Grid.Row="0">
                    <ScrollViewer MinZoomFactor="1" MaxZoomFactor="3"  VerticalScrollMode="Disabled" HorizontalScrollMode="Disabled">

                        <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       Margin="0"  Source="{x:Bind BlockData}" Holding="Image_Holding" PointerPressed="Image_PointerPressed" />
                    </ScrollViewer>
                </Viewbox>
            </Grid>

        </DataTemplate>
        <DataTemplate x:Key="TextTemplate" x:DataType="model:NoteBlock">
            <Grid>
                <Viewbox StretchDirection="Both" Stretch="Uniform" VerticalAlignment="Top">
                    <RichEditBox Name="richEditor" BorderThickness="0" l:RtfText.RichText="{x:Bind BlockData}" Margin="0" GotFocus="richEditor_GotFocus" >
                    </RichEditBox>
                </Viewbox>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="GapTemplate">
            <Grid Height="20" >
            </Grid>
        </DataTemplate>

        <l:NoteTypeTemplateSelector x:Key="NoteTypeTemplateSelector"
        TextTemplate="{StaticResource TextTemplate}"
        ImageTemplate="{StaticResource ImageTemplate}"
        GapTemplate="{StaticResource GapTemplate}"></l:NoteTypeTemplateSelector>
    </UserControl.Resources>

    <Grid Name="ContainerGrid" Background="White" PointerPressed="ContainerGrid_PointerPressed" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <ToggleSwitch Margin="0" Name="Mode" HorizontalAlignment="Right" OffContent="Read Mode" OnContent="Edit Mode"></ToggleSwitch>

        <ListView  x:Name="NoteList" Background="Transparent" 
                   Grid.Row="1"  

                   ItemsSource="{x:Bind ds}" 
                   ItemTemplateSelector="{StaticResource NoteTypeTemplateSelector}"
                   ScrollViewer.VerticalScrollMode="Enabled">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <ContentPresenter/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
        <SwapChainPanel Name="DxPanel"  Grid.Row="0"></SwapChainPanel>
    </Grid>
</UserControl>

你能帮忙解决一下吗？

Answer 1

您可以尝试使用其中一个转换为＆＃34; ImageTemplate＆＃34;和＆＃34; TextTemplate＆＃34;缩放图像/文本。

https://docs.microsoft.com/en-us/windows/uwp/graphics/transforms-overview

我认为ScaleTransform可以解决您的问题。