如何在uwp中縮放文本和圖像？

Question

我想縮放文本和圖像content.I想這樣的輸出：

，反而會導致這樣的：

我的代碼如下。問題是什麼？

<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」的一個Transform來縮放圖像/文本。

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

我覺得應該ScaleTransform解決您的問題。