如何在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

您可以尝试使用"ImageTemplate“和"TextTemplate”的转换之一来缩放图像/文本。

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

我认为ScaleTransform应该解决你的问题。