教程7：图片教程
2020-03-14 本文已影响0人
YottaYuan
图片教程
<Image Source="Images/melon1.png"/>
与其余控件一样，将对图像进行测量和排列，因此其大小不仅取决于原始图像的尺寸。布局属性确定图像的可用空间，而拉伸属性定义图像如何填充可用空间：
- 无：保留尺寸。
- 填充：图像将填充可用空间，尺寸会被修改。
- 均匀：图像将尽可能多地填充可用空间，以保持宽高比。
- UniformToFill：图像完全填充了可用空间，保留了宽高比，如果图像太大，则将其裁剪。
下面的示例显示图像控件的所有可能的强度模式：
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White" TextElement.Foreground="Black">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="Original Image" TextAlignment="Center"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0" HorizontalAlignment="Center"
VerticalAlignment="Center">
<Image Source="Images/melon1.png" Stretch="None"/>
</Border>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="None" TextAlignment="Center" Grid.Column="0"/>
<TextBlock Text="Fill" TextAlignment="Center" Grid.Column="1"/>
<TextBlock Text="Uniform" TextAlignment="Center" Grid.Column="2"/>
<TextBlock Text="UniformToFill" TextAlignment="Center" Grid.Column="3"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="0" Grid.Row="1">
<Image Source="Images/melon1.png" Stretch="None"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="1" Grid.Row="1">
<Image Source="Images/melon1.png" Stretch="Fill"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="2" Grid.Row="1">
<Image Source="Images/melon1.png" Stretch="Uniform"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="3" Grid.Row="1">
<Image Source="Images/melon1.png" Stretch="UniformToFill"/>
</Border>
</Grid>
</StackPanel>
</Grid>
ImagesTutorialImg1.jpg
图像刷
ImageBrush使用图像来绘制图形对象的区域。通常应用于面板或边框的“ 背景”属性或填充形状。该ImageSource的财产是为了保持该位图的内容。
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Background>
<ImageBrush ImageSource="Images/melon1.png" Stretch="Uniform" TileMode="Tile"
Viewport="0,0,0.25,0.25" />
</Grid.Background>
</Grid>
ImageBrush源自TileBrush。使用TileBrush绘制区域时，您可以控制三个元素：content，tile和输出区域。
ImagesTutorialImg6.jpg
TileBrush定义了一些有趣的属性，这些属性配置了如何将图块放置在输出区域中。
伸展
此属性指定内容如何拉伸以适合其图块。在以下示例中，所有拉伸模式都应用于Rectangle元素：
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White"
TextElement.Foreground="Black">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="Original Image" TextAlignment="Center"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0" HorizontalAlignment="Center"
VerticalAlignment="Center">
<Rectangle Width="300" Height="300">
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon1.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="None" TextAlignment="Center" Grid.Column="0"/>
<TextBlock Text="Fill" TextAlignment="Center" Grid.Column="1"/>
<TextBlock Text="Uniform" TextAlignment="Center" Grid.Column="2"/>
<TextBlock Text="UniformToFill" TextAlignment="Center" Grid.Column="3"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="0" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon1.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="1" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon1.png" Stretch="Fill"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="2" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon1.png" Stretch="Uniform"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="120" Height="200" Grid.Column="3" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon1.png" Stretch="UniformToFill"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</Grid>
</StackPanel>
</Grid>
ImagesTutorialImg2.jpg
注意
如您在前面的屏幕快照中所见，当图块不完全适合输出区域时，它们居中。这是默认行为，尽管您可以使用“ 视图框”和“ 视口”属性（如下所述）进行更改。
视图框(Viewbox)
此属性指定定义图块的内容的子图像。所述ViewboxUnits属性用于指示是否Viewbox控件值被解释为相对，默认值，或绝对值。
下面的示例示出了不同的效果拉伸模式上的TileBrush具有Viewbox控件比所述输出面积小。请注意，TileBrush的内容永远不会剪切到Viewbox（在Viewbox之外的图像部分会被着色以使其清晰可见）。
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White" TextElement.Foreground="Black">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Original Image" TextAlignment="Center"/>
<TextBlock Text="Viewbox="0.5,0.25,0.25,0.5"" TextAlignment="Center"
Grid.Column="1"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0" HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Row="1">
<Rectangle Width="300" Height="300">
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon2.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0" HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Column="1" Grid.Row="1">
<Rectangle Width="300" Height="300">
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon2-viewbox.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</Grid>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="None" TextAlignment="Center" Grid.Column="0"/>
<TextBlock Text="Fill" TextAlignment="Center" Grid.Column="1"/>
<TextBlock Text="Uniform" TextAlignment="Center" Grid.Column="2"/>
<TextBlock Text="UniformToFill" TextAlignment="Center" Grid.Column="3"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="150" Height="150" Grid.Column="0" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon2-viewbox.png" Stretch="None"
Viewbox="0.5,0.25,0.25,0.5"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="150" Height="150" Grid.Column="1" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon2-viewbox.png" Stretch="Fill"
Viewbox="0.5,0.25,0.25,0.5"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="150" Height="150" Grid.Column="2" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon2-viewbox.png" Stretch="Uniform"
Viewbox="0.5,0.25,0.25,0.5"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,0"
Width="150" Height="150" Grid.Column="3" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/melon2-viewbox.png" Stretch="UniformToFill"
Viewbox="0.5,0.25,0.25,0.5"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</Grid>
</StackPanel>
</Grid>
ImagesTutorialImg3.jpg
视口
此属性指定输出区域中图块的位置和尺寸。默认情况下，TileBrush具有覆盖整个输出区域的单个图块。
该ViewportUnits属性用于指定是否视口使用绝对或相对坐标。相对时（默认模式），坐标相对于输出区域的大小。点（0,0）代表输出区域的左上角，而（1,1）代表输出区域的右下角。
瓷砖模式
该TILEMODE属性允许你指定一个怎样的内容的TileBrush重复填写输出区域。要创建属性的模式TILEMODE设置为平铺，FlipX，FlipY或FlipXY和视口的的的TileBrush设置，使其比你画的面积; 否则，无论您使用哪种TileMode设置，都只会生成单个图块。
以下示例显示了不同的切片模式：
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White" TextElement.Foreground="Black">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Original Image" TextAlignment="Center"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5" HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Row="1">
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</Grid>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="None" TextAlignment="Center" Grid.Column="0"/>
<TextBlock Text="Tile" TextAlignment="Center" Grid.Column="1"/>
<TextBlock Text="FlipX" TextAlignment="Center" Grid.Column="2"/>
<TextBlock Text="FlipY" TextAlignment="Center" Grid.Column="3"/>
<TextBlock Text="FlipXY" TextAlignment="Center" Grid.Column="4"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="0" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="None" ViewportUnits="Absolute"
Viewport="0,0,25,25" TileMode="None"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="1" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="None" ViewportUnits="Absolute"
Viewport="0,0,25,25" TileMode="Tile"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="2" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="None" ViewportUnits="Absolute"
Viewport="0,0,25,25" TileMode="FlipX"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="3" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="None" ViewportUnits="Absolute"
Viewport="0,0,25,25" TileMode="FlipY"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="4" Grid.Row="1">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="None" ViewportUnits="Absolute"
Viewport="0,0,25,25" TileMode="FlipXY"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="0" Grid.Row="2">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="Fill"
ViewportUnits="RelativeToBoundingBox" Viewport="0,0,0.1,0.2" TileMode="None"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="1" Grid.Row="2">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="Fill"
ViewportUnits="RelativeToBoundingBox" Viewport="0,0,0.1,0.2" TileMode="Tile"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="2" Grid.Row="2">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="Fill"
ViewportUnits="RelativeToBoundingBox" Viewport="0,0,0.1,0.2" TileMode="FlipX"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="3" Grid.Row="2">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="Fill"
ViewportUnits="RelativeToBoundingBox" Viewport="0,0,0.1,0.2" TileMode="FlipY"/>
</Rectangle.Fill>
</Rectangle>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Margin="5"
Width="100" Height="100" Grid.Column="4" Grid.Row="2">
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/tile.png" Stretch="Fill"
ViewportUnits="RelativeToBoundingBox" Viewport="0,0,0.1,0.2" TileMode="FlipXY"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</Grid>
</StackPanel>
</Grid>
ImagesTutorialImg4.jpg
调整尺寸
默认情况下，noesisGUI使用在GPU中实现的高质量重采样算法缩放图像。尽管大多数时候质量都很好，但是该算法往往会模糊结果以减少混叠。可以通过在任何UIElement后代上使用BitmapScalingMode附加属性来更改默认算法。
<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
UseLayoutRounding="True" Orientation="Horizontal">
<Grid RenderOptions.BitmapScalingMode="Linear" Width="500">
<Grid.Background>
<ImageBrush ImageSource="Images/bg.jpg" Stretch="UniformToFill"
AlignmentX="Center" AlignmentY="Center"/>
</Grid.Background>
<TextBlock Text="Linear" Foreground="White" HorizontalAlignment="Left"
VerticalAlignment="Top" Margin="10" />
</Grid>
<Grid RenderOptions.BitmapScalingMode="HighQuality" Width="500">
<Grid.Background>
<ImageBrush ImageSource="Images/bg.jpg" Stretch="UniformToFill"
AlignmentX="Center" AlignmentY="Center"/>
</Grid.Background>
<TextBlock Text="HighQuality" Foreground="White" HorizontalAlignment="Left"
VerticalAlignment="Top" Margin="10" />
</Grid>
</StackPanel>
ImagesTutorialImg41.jpg
纹理图集
纹理图集是由许多单独的纹理组成的大型纹理，以提高性能。传统上，它是一种在屏幕上制作精灵动画的方法。
尽管您可以使用所需的工具，但我们提供了TexturePacker插件，可直接生成有效的XAML，可用作NoesisGui中的地图集。该插件可以在我们的github中找到。以下是使用该工具生成的地图集：
<!-- Created using Noesis XAML exporter for TexturePacker (http://www.texturepacker.com) -->
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ImageBrush x:Key="aladin01" ImageSource="aladin-atlas.png" Viewbox="145,58,33,54" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin02" ImageSource="aladin-atlas.png" Viewbox="180,58,30,54" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin03" ImageSource="aladin-atlas.png" Viewbox="73,61,27,57" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin04" ImageSource="aladin-atlas.png" Viewbox="39,2,33,57" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin05" ImageSource="aladin-atlas.png" Viewbox="112,2,38,54" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin06" ImageSource="aladin-atlas.png" Viewbox="74,2,36,56" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin07" ImageSource="aladin-atlas.png" Viewbox="152,2,31,54" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin08" ImageSource="aladin-atlas.png" Viewbox="185,2,27,54" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin09" ImageSource="aladin-atlas.png" Viewbox="41,61,30,57" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin10" ImageSource="aladin-atlas.png" Viewbox="2,2,35,58" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin11" ImageSource="aladin-atlas.png" Viewbox="102,60,41,55" ViewboxUnits="Absolute"
Stretch="Fill"/>
<ImageBrush x:Key="aladin12" ImageSource="aladin-atlas.png" Viewbox="2,62,37,57" ViewboxUnits="Absolute"
Stretch="Fill"/>
</ResourceDictionary>
下面的示例演示如何引用该词典以在XAML文件中使用Sprite：
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
UseLayoutRounding="True" Background="White" TextElement.Foreground="Black">
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Images/Aladin/aladin.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Storyboard x:Key="AladinRun" RepeatBehavior="Forever" Duration="0:0:4.2">
<DoubleAnimation Storyboard.TargetName="aladin" Storyboard.TargetProperty="RenderTransform.X"
From="-30" To="500" Duration="0:0:4.2"/>
<Storyboard Duration="0:0:0.6" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_01"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.05">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_02"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.05">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.10">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_03"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.10">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.15">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_04"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.15">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.20">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_05"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.20">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.25">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_06"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.25">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.30">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_07"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.30">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.35">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_08"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.35">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.40">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_09"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.40">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.45">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_10"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.45">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.50">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_11"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.50">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.55">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_12"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.55">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.60">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Storyboard>
</ResourceDictionary>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource AladinRun}"/>
</EventTrigger>
</Grid.Triggers>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Atlas Image" TextAlignment="Center"/>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Image Source="Images/Aladin/aladin-atlas.png" Stretch="None"/>
</Border>
<TextBlock Text="Image brushes for each sprite" TextAlignment="Center" Margin="0,10,0,0"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin01}" Width="33" Height="54"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin02}" Width="30" Height="54"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin03}" Width="27" Height="57"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin04}" Width="33" Height="57"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin05}" Width="38" Height="54"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin06}" Width="36" Height="56"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin07}" Width="31" Height="54"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin08}" Width="27" Height="54"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin09}" Width="30" Height="57"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin10}" Width="35" Height="58"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin11}" Width="41" Height="55"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="5">
<Rectangle Fill="{StaticResource aladin12}" Width="37" Height="57"/>
</Border>
</StackPanel>
<TextBlock Text="Animated sprites" TextAlignment="Center" Margin="0,10,0,0"/>
<Border BorderBrush="Black" BorderThickness="1" Width="500" ClipToBounds="True">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Cyan"/>
<GradientStop Offset="0.71" Color="White"/>
<GradientStop Offset="0.72" Color="Green"/>
<GradientStop Offset="1" Color="LightGreen"/>
</LinearGradientBrush>
</Border.Background>
<Grid x:Name="aladin" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0,50,0,10">
<Grid.RenderTransform>
<TranslateTransform/>
</Grid.RenderTransform>
<Rectangle x:Name="aladin_sprite_01" Fill="{StaticResource aladin01}" Width="33" Height="54"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Visible"/>
<Rectangle x:Name="aladin_sprite_02" Fill="{StaticResource aladin02}" Width="30" Height="54"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_03" Fill="{StaticResource aladin03}" Width="27" Height="57"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_04" Fill="{StaticResource aladin04}" Width="33" Height="57"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_05" Fill="{StaticResource aladin05}" Width="38" Height="54"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_06" Fill="{StaticResource aladin06}" Width="36" Height="56"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_07" Fill="{StaticResource aladin07}" Width="31" Height="54"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_08" Fill="{StaticResource aladin08}" Width="27" Height="54"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_09" Fill="{StaticResource aladin09}" Width="30" Height="57"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_10" Fill="{StaticResource aladin10}" Width="35" Height="58"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_11" Fill="{StaticResource aladin11}" Width="41" Height="55"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
<Rectangle x:Name="aladin_sprite_12" Fill="{StaticResource aladin12}" Width="37" Height="57"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
</Grid>
</Border>
</StackPanel>
</Grid>
ImagesTutorialImg5.jpg
9切片缩放
9切片缩放是一种不错的方式，可以用来缩放符号而不会扭曲它们。这在创建标志，气泡等时特别有用。该符号分为9个部分，并且仅中间部分被拉伸。拐角会用符号变换，但不会变形。
ImagesTutorialImg7.jpg
这种技术对于Flash设计人员来说很常见，可以通过使用网格轻松地进行仿真。
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Background>
<RadialGradientBrush Center="0.6,0.7" GradientOrigin="0.6,0.7" RadiusX="0.6" RadiusY="0.7">
<GradientStop Offset="0" Color="YellowGreen"/>
<GradientStop Offset="1" Color="OliveDrab"/>
</RadialGradientBrush>
</Grid.Background>
<Grid.Resources>
<ImageBrush x:Key="WoodSignTL" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="0,0,50,60"/>
<ImageBrush x:Key="WoodSignT" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="50,0,200,60"/>
<ImageBrush x:Key="WoodSignTR" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="250,0,50,60"/>
<ImageBrush x:Key="WoodSignML" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="0,60,50,80"/>
<ImageBrush x:Key="WoodSignM" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="50,60,200,80"/>
<ImageBrush x:Key="WoodSignMR" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="250,60,50,80"/>
<ImageBrush x:Key="WoodSignBL" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="0,140,50,60"/>
<ImageBrush x:Key="WoodSignB" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="50,140,200,60"/>
<ImageBrush x:Key="WoodSignBR" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="250,140,50,60"/>
</Grid.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid Width="200" Height="150">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="{StaticResource WoodSignTL}"/>
<Rectangle Grid.Column="1" Grid.Row="0" Fill="{StaticResource WoodSignT}"/>
<Rectangle Grid.Column="2" Grid.Row="0" Fill="{StaticResource WoodSignTR}"/>
<Rectangle Grid.Column="0" Grid.Row="1" Fill="{StaticResource WoodSignML}"/>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="{StaticResource WoodSignM}"/>
<Rectangle Grid.Column="2" Grid.Row="1" Fill="{StaticResource WoodSignMR}"/>
<Rectangle Grid.Column="0" Grid.Row="2" Fill="{StaticResource WoodSignBL}"/>
<Rectangle Grid.Column="1" Grid.Row="2" Fill="{StaticResource WoodSignB}"/>
<Rectangle Grid.Column="2" Grid.Row="2" Fill="{StaticResource WoodSignBR}"/>
<TextBlock Grid.ColumnSpan="3" Grid.RowSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center"
FontFamily="#Another" FontSize="40" Foreground="#402000" Text="Welcome!"/>
</Grid>
</StackPanel>
</Grid>
运行时映像
有时您需要生成在编译时不可用的映像。例如，当您从Internet下载图像或您的应用程序支持用户生成的图像时。对于这些情况，提供了TextureSource类。一个TextureSource被初始化的传递本地质感手柄。初始化后，必须将其设置为相应的Image或ImageBrush。
注意
NoesisGUI希望使用预乘格式的Alpha纹理。传递纹理手柄时，请考虑到这一点。
http://www.noesisengine.com/forums/viewtopic.php?f=3&t=194
C ++
void SetTexture(ID3D11Texture2D* d3dTexture, FrameworkElement* root)
{
Ptr<Texture> texture = D3D11Factory::WrapTexture(d3dTexture, 512, 512, 1,
TextureFormat::BGRA8, false);
Image* image = root->FindName<Image>("image");
image->SetSource(MakePtr<TextureSource>(texture));
}
NoesisGUI直接了解Unity提供的类Texture2D。
C＃-Unity
Grid grid = (Grid)GetComponent<NoesisView>().Content;
Texture2D texture = (Texture2D)Resources.Load("Noesis");
TextureSource source = new TextureSource(texture);
Image image = (Image)grid.FindName("image");
image.SetSource(source);
注意
尽管在此示例中，我们使用Texture2D，但也支持RenderTexture和MovieTexture。实际上，支持所有从Texture派生的类。
