How can I scale text and image in uwp? - windows-phone

Question

I want to scale text and image content.I want to an output like that :
But result like that:
My code is below. What is the problem?
<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>
Could you please help about that?

Answer 1

You can try using one of the Transform for your "ImageTemplate" and "TextTemplate" to scale the image/Text.
https://learn.microsoft.com/en-us/windows/uwp/graphics/transforms-overview
I think ScaleTransform should solve your problem.