win2d图片平铺无法在UWP Scrollviewer中运行
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了win2d图片平铺无法在UWP Scrollviewer中运行相关的知识,希望对你有一定的参考价值。
我试图在scrollviewer中使用win2d平铺图像。这是我到目前为止的代码:
private void myCanvasControl_CreateResources(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{
args.TrackAsyncAction(Task.Run(async () =>
{
// Load the background image and create an image brush from it
this.backgroundImage = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///Assets/background.jpg"));
this.backgroundBrush = new CanvasImageBrush(sender, this.backgroundImage);
// Set the brush's edge behaviour to wrap, so the image repeats if the drawn region is too big
this.backgroundBrush.ExtendX = this.backgroundBrush.ExtendY = CanvasEdgeBehavior.Wrap;
this.resourcesLoaded = true;
}).AsAsyncAction());
}
// win2d draw method
private void myCanvasControl_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
// Just fill a rectangle with our tiling image brush, covering the entire bounds of the canvas control
var session = args.DrawingSession;
session.FillRectangle(new Rect(new Point(), sender.RenderSize), this.backgroundBrush);
}
使用此代码,我的图像将打印到画布,但是当我尝试滚动时,图像不会移动(即,平铺图像的相同部分在整个时间都是可见的,即使在滚动时也是如此)。关于如何让图像相应滚动的任何消息?
编辑:这是我的XAML代码:
<Page
x:Class="HelloWorld2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorld2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
mc:Ignorable="d">
<Grid>
<RelativePanel>
<Button Name="AddTextButton"
Content="New Text Node"
Click="AddTextButton_Click"
Height="48"/>
<Button Name="AddInkButton"
Content="New Ink Node"
Height="48"
Click="AddInkButton_Click"
RelativePanel.RightOf="AddTextButton"
/>
<Button Name="AddImageButton"
Content="Add Image"
Click="AddImageButton_Click"
Height="48"
RelativePanel.RightOf="AddInkButton"/>
<Button Name="AddVideoButton"
Content="Add Video"
Click="AddVideoButton_Click"
Height="48"
RelativePanel.RightOf="AddImageButton" />
<ToggleButton Name="inkCapabilities" IsThreeState="False"
Checked="inkCapabilities_Checked" Unchecked="inkCapabilities_Unchecked"
Content="Ink Capabilities OFF"
Height="48" Width="200"
RelativePanel.RightOf="AddVideoButton"/>
<InkToolbar TargetInkCanvas="{x:Bind inkCanvas}"
RelativePanel.RightOf="inkCapabilities"/>
<ScrollViewer
VerticalScrollMode="Auto"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
RelativePanel.Below="AddTextButton">
<canvas:CanvasControl Name="myCanvasControl"
Draw="myCanvasControl_Draw"
CreateResources="myCanvasControl_CreateResources"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Canvas Name="parentCanvas" Height="10000" Width="10000"
RelativePanel.Below ="AddTextButton">
<InkCanvas Name="inkCanvas" Height="10000" Width="10000"
Visibility="Visible" />
</Canvas>
</canvas:CanvasControl>
</ScrollViewer>
</RelativePanel>
</Grid>
谢谢!
答案
您可以尝试为ScrollViewer提供属性高度,然后将canvas:CanvasControl
的高度设置为更大的值。如下例,
<ScrollViewer Height="500"
VerticalScrollMode="Auto"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
RelativePanel.Below="AddTextButton">
<canvas:CanvasControl Name="myCanvasControl"
Height="10000" Width="10000"
...
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
...
</canvas:CanvasControl>
</ScrollViewer>
以上是关于win2d图片平铺无法在UWP Scrollviewer中运行的主要内容,如果未能解决你的问题,请参考以下文章