PR 133311: PR 115417: Fix TextShimmer sample for mobile
- PR 115417: Fix TextShimmer sample for mobile
This commit is contained in:
David Li
Коммит
f6c0eedbfd
|
|
@ -26,16 +26,18 @@
|
|||
<TextBlock Style="{StaticResource TitleText}" >TextBlock</TextBlock>
|
||||
<Border Style="{StaticResource DividingBorder}"/>
|
||||
|
||||
<common:CompositionShadow BlurRadius="5" ShadowOpacity=".7" OffsetX="1" OffsetY="1"
|
||||
<common:CompositionShadow BlurRadius="6" ShadowOpacity=".7" OffsetX="2" OffsetY="2"
|
||||
VerticalAlignment="Center"
|
||||
HorizontalAlignment="Center">
|
||||
<TextBlock TextWrapping="Wrap">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget sem luctus, gravida diam cursus, rutrum ipsum.
|
||||
Pellentesque semper magna nec sapien ornare tincidunt. Sed pellentesque, turpis quis laoreet pellentesque, urna sapien efficitur nulla,
|
||||
at interdum dolor sapien ut odio. Sed ullamcorper sapien velit, id finibus risus gravida vitae. Morbi ac ultrices lectus. Aenean felis
|
||||
justo, aliquet a risus ut, condimentum malesuada metus. Duis vehicula pharetra dolor vel finibus. Nunc auctor tortor nunc, in varius velit
|
||||
lobortis vel. Duis viverra, ante id mollis mattis, sem mauris ullamcorper dolor, sed rhoncus est erat eget ligula. Aliquam rutrum velit et
|
||||
felis sollicitudin, eget dapibus dui accumsan.
|
||||
HorizontalAlignment="Left">
|
||||
<TextBlock TextWrapping="Wrap" FontSize="30" FontWeight="SemiBold">
|
||||
Here’s a custom control that allows you to apply DropShadows through Markup on XAML Text, Images, or Shapes
|
||||
</TextBlock>
|
||||
</common:CompositionShadow>
|
||||
<common:CompositionShadow BlurRadius="4" ShadowOpacity=".7" OffsetX="1" OffsetY="1"
|
||||
VerticalAlignment="Center"
|
||||
HorizontalAlignment="Left">
|
||||
<TextBlock TextWrapping="Wrap" FontSize="16">
|
||||
Here’s a custom control that allows you to apply DropShadows through Markup on XAML Text, Images, or Shapes
|
||||
</TextBlock>
|
||||
</common:CompositionShadow>
|
||||
|
||||
|
|
@ -43,9 +45,8 @@
|
|||
<Border Style="{StaticResource DividingBorder}"/>
|
||||
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<common:CompositionShadow OffsetX="10" OffsetY="15" Margin="20">
|
||||
<Polygon Points="50,0 0,50 50,50"
|
||||
Stroke="Red" StrokeThickness="2" Fill="Blue"/>
|
||||
<common:CompositionShadow OffsetX="8" OffsetY="12" Margin="20" Color="Gray" BlurRadius="10">
|
||||
<Polygon Points="50,0 0,50 50,50" Fill="Blue"/>
|
||||
</common:CompositionShadow>
|
||||
|
||||
<common:CompositionShadow OffsetX="10" OffsetY="10" Margin="20">
|
||||
|
|
@ -68,37 +69,61 @@
|
|||
HorizontalScrollMode="Enabled"
|
||||
HorizontalScrollBarVisibility="Auto">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<Image Source="ms-appx:///Assets/WindowsInsiders/Unicorn.png"
|
||||
<RelativePanel Margin="10" Padding="0">
|
||||
<Image x:Name="Image1" Source="ms-appx:///Assets/WindowsInsiders/Unicorn.png"
|
||||
Width="200" Height="200"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"/>
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Top"
|
||||
FontStyle="Italic"
|
||||
RelativePanel.Below="Image1"
|
||||
RelativePanel.AlignHorizontalCenterWith="Image1">Before</TextBlock>
|
||||
</RelativePanel>
|
||||
|
||||
<RelativePanel Margin="10" Padding="0">
|
||||
<common:CompositionShadow x:Name="Image2" Color="HotPink" BlurRadius="12"
|
||||
Width="200" Height="200"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top">
|
||||
<Image Source="ms-appx:///Assets/WindowsInsiders/Unicorn.png"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"/>
|
||||
</common:CompositionShadow>
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Top"
|
||||
FontStyle="Italic"
|
||||
RelativePanel.Below="Image2"
|
||||
RelativePanel.AlignHorizontalCenterWith="Image2">After</TextBlock>
|
||||
</RelativePanel>
|
||||
|
||||
<RelativePanel Margin="10" Padding="0">
|
||||
<Image x:Name="Image3" Source="ms-appx:///Assets/WindowsInsiders/Ninjacat-3.png"
|
||||
Width="200" Height="200"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"/>
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Top"
|
||||
FontStyle="Italic"
|
||||
RelativePanel.Below="Image3"
|
||||
RelativePanel.AlignHorizontalCenterWith="Image3">Before</TextBlock>
|
||||
</RelativePanel>
|
||||
|
||||
<RelativePanel Margin="10" Padding="0">
|
||||
<common:CompositionShadow x:Name="Image4" OffsetY="5" OffsetX="2"
|
||||
Width="200" Height="200"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
Margin="10"/>
|
||||
|
||||
<common:CompositionShadow Color="HotPink" BlurRadius="12"
|
||||
Width="200" Height="200"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
Margin="10">
|
||||
<Image Source="ms-appx:///Assets/WindowsInsiders/Unicorn.png"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"/>
|
||||
</common:CompositionShadow>
|
||||
|
||||
<Image Source="ms-appx:///Assets/WindowsInsiders/Ninjacat-3.png"
|
||||
Width="200" Height="200"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
Margin="10"/>
|
||||
|
||||
<common:CompositionShadow OffsetY="5" OffsetX="2"
|
||||
Width="200" Height="200"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
Margin="10">
|
||||
<Image Source="ms-appx:///Assets/WindowsInsiders/Ninjacat-3.png"
|
||||
VerticalAlignment="Top">
|
||||
<Image Source="ms-appx:///Assets/WindowsInsiders/Ninjacat-3.png"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"/>
|
||||
</common:CompositionShadow>
|
||||
</common:CompositionShadow>
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Top"
|
||||
FontStyle="Italic"
|
||||
RelativePanel.Below="Image4"
|
||||
RelativePanel.AlignHorizontalCenterWith="Image4">After</TextBlock>
|
||||
</RelativePanel>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</StackPanel>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@
|
|||
mc:Ignorable="d">
|
||||
|
||||
<Grid Background="Black">
|
||||
<TextBlock Name="TextBlock" FontSize="100" Foreground="DimGray" FontFamily="SegoeUI" FontWeight="Thin"
|
||||
<Viewbox Stretch="Uniform" StretchDirection="DownOnly" Margin="20, 0, 20, 0">
|
||||
<TextBlock Name="TextBlock" FontSize="100" Foreground="DimGray" FontFamily="SegoeUI" FontWeight="Thin"
|
||||
TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center">
|
||||
Text Shimmer
|
||||
</TextBlock>
|
||||
</TextBlock>
|
||||
</Viewbox>
|
||||
</Grid>
|
||||
</local:SamplePage>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,6 @@ namespace CompositionSampleGallery
|
|||
{
|
||||
this.InitializeComponent();
|
||||
this.Loaded += MainPage_Loaded;
|
||||
_foregroundSwitch = false;
|
||||
_backgroundSwitch = false;
|
||||
}
|
||||
|
||||
#region Background Toggle
|
||||
|
|
@ -101,56 +99,24 @@ namespace CompositionSampleGallery
|
|||
private void MainPage_Loaded(object sender, RoutedEventArgs e)
|
||||
{
|
||||
|
||||
// Set up scene: get interop compositor, add comp root with clip, insert sceneContainer
|
||||
// Set up scene: get interop compositor, create comp root and initialize scene
|
||||
_compositor = ElementCompositionPreview.GetElementVisual(CompGrid).Compositor;
|
||||
var root = _compositor.CreateContainerVisual();
|
||||
root.Size = CompGrid.RenderSize.ToVector2();
|
||||
root.Clip = _compositor.CreateInsetClip();
|
||||
ElementCompositionPreview.SetElementChildVisual(CompGrid, root);
|
||||
|
||||
// Populate screen with visuals based on container size
|
||||
var smallerSize = Math.Min(root.Size.X, root.Size.Y);
|
||||
_spriteSize = new Vector2(smallerSize / 10);
|
||||
_numVisuals = (root.Size.X * root.Size.Y) * 100 / (smallerSize * smallerSize);
|
||||
_root = _compositor.CreateContainerVisual();
|
||||
ElementCompositionPreview.SetElementChildVisual(CompGrid, _root);
|
||||
|
||||
// Compute root size and scene container transforms; insert clip
|
||||
_sceneContainer = _compositor.CreateContainerVisual();
|
||||
_sceneContainer.Size = root.Size - _spriteSize;
|
||||
_sceneContainer.Offset = new Vector3(_spriteSize / 2, 0);
|
||||
root.Children.InsertAtTop(_sceneContainer);
|
||||
ComputeSceneLayout();
|
||||
_root.Children.InsertAtTop(_sceneContainer);
|
||||
|
||||
// Apply perspective transform to sceneContainer
|
||||
float perspectiveOriginPercent = 0.5f;
|
||||
Vector3 perspectiveOrigin = new Vector3(perspectiveOriginPercent * _sceneContainer.Size, 0);
|
||||
float perspectiveDepth = -1000;
|
||||
_sceneContainer.TransformMatrix = Matrix4x4.CreateTranslation(-perspectiveOrigin) *
|
||||
new Matrix4x4(1, 0, 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 1 / perspectiveDepth,
|
||||
0, 0, 0, 1) *
|
||||
Matrix4x4.CreateTranslation(perspectiveOrigin);
|
||||
|
||||
// Initialize layervisuals; specify size
|
||||
_foregroundLayerVisual = _compositor.CreateLayerVisual();
|
||||
_backgroundLayerVisual = _compositor.CreateLayerVisual();
|
||||
|
||||
// Create SpriteVisuals and add to lists
|
||||
PopulateSpriteVisuals();
|
||||
|
||||
// Initialize layervisuals; specify size
|
||||
_foregroundLayerVisual = _compositor.CreateLayerVisual();
|
||||
_foregroundLayerVisual.Size = root.Size;
|
||||
_backgroundLayerVisual = _compositor.CreateLayerVisual();
|
||||
_backgroundLayerVisual.Size = root.Size;
|
||||
|
||||
// Sort the lists by z offset so drawing order matches z order
|
||||
_listOfForegroundVisuals.Sort(CompareZOffset);
|
||||
_listOfBackgroundVisuals.Sort(CompareZOffset);
|
||||
|
||||
// Insert spritevisuals into layervisuals
|
||||
foreach (var visual in _listOfForegroundVisuals)
|
||||
{
|
||||
_foregroundLayerVisual.Children.InsertAtTop(visual);
|
||||
}
|
||||
foreach (var visual in _listOfBackgroundVisuals)
|
||||
{
|
||||
_backgroundLayerVisual.Children.InsertAtTop(visual);
|
||||
}
|
||||
|
||||
// Insert layervisuals in visual tree
|
||||
_sceneContainer.Children.InsertAtTop(_foregroundLayerVisual);
|
||||
|
|
@ -158,6 +124,44 @@ namespace CompositionSampleGallery
|
|||
|
||||
// Initialize effects and their animations
|
||||
CreateEffectAnimations();
|
||||
|
||||
// CompGrid_SizeChanged event fired after MainPage_Loaded
|
||||
CompGrid.SizeChanged += CompGrid_SizeChanged;
|
||||
}
|
||||
|
||||
private void CompGrid_SizeChanged(object sender, SizeChangedEventArgs e)
|
||||
{
|
||||
_foregroundLayerVisual.Children.RemoveAll();
|
||||
_backgroundLayerVisual.Children.RemoveAll();
|
||||
ComputeSceneLayout();
|
||||
PopulateSpriteVisuals();
|
||||
}
|
||||
|
||||
#region Compute Layout and Populate Visuals
|
||||
private void ComputeSceneLayout()
|
||||
{
|
||||
// Compute root size and add clip
|
||||
_root.Size = CompGrid.RenderSize.ToVector2();
|
||||
_root.Clip = _compositor.CreateInsetClip();
|
||||
|
||||
// Populate screen with visuals based on container size
|
||||
var smallerSize = Math.Min(_root.Size.X, _root.Size.Y);
|
||||
_spriteSize = new Vector2(smallerSize / 10);
|
||||
_numVisuals = (_root.Size.X * _root.Size.Y) * 100 / (smallerSize * smallerSize);
|
||||
|
||||
_sceneContainer.Size = _root.Size - _spriteSize;
|
||||
_sceneContainer.Offset = new Vector3(_spriteSize / 2, 0);
|
||||
|
||||
// Apply perspective transform to sceneContainer
|
||||
float perspectiveOriginPercent = 0.5f;
|
||||
Vector3 perspectiveOrigin = new Vector3(perspectiveOriginPercent * _sceneContainer.Size, 0);
|
||||
float perspectiveDepth = -1000;
|
||||
_sceneContainer.TransformMatrix = Matrix4x4.CreateTranslation(-perspectiveOrigin) *
|
||||
new Matrix4x4(1, 0, 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 1 / perspectiveDepth,
|
||||
0, 0, 0, 1) *
|
||||
Matrix4x4.CreateTranslation(perspectiveOrigin);
|
||||
}
|
||||
|
||||
private void PopulateSpriteVisuals()
|
||||
|
|
@ -167,6 +171,9 @@ namespace CompositionSampleGallery
|
|||
var rand = new Random();
|
||||
float z_depth = -1000.0f;
|
||||
|
||||
var listOfForegroundVisuals = new List<SpriteVisual>();
|
||||
var listOfBackgroundVisuals = new List<SpriteVisual>();
|
||||
|
||||
while (count < _numVisuals)
|
||||
{
|
||||
var r_x = (float)rand.NextDouble();
|
||||
|
|
@ -183,16 +190,36 @@ namespace CompositionSampleGallery
|
|||
// Partition into two lists
|
||||
if (sprite.Offset.Z > z_depth / 2)
|
||||
{
|
||||
_listOfForegroundVisuals.Add(sprite);
|
||||
listOfForegroundVisuals.Add(sprite);
|
||||
}
|
||||
else
|
||||
{
|
||||
_listOfBackgroundVisuals.Add(sprite);
|
||||
listOfBackgroundVisuals.Add(sprite);
|
||||
}
|
||||
count++;
|
||||
}
|
||||
|
||||
_foregroundLayerVisual.Size = _root.Size;
|
||||
_backgroundLayerVisual.Size = _root.Size;
|
||||
|
||||
// Sort the lists by z offset so drawing order matches z order
|
||||
listOfForegroundVisuals.Sort(CompareZOffset);
|
||||
listOfBackgroundVisuals.Sort(CompareZOffset);
|
||||
|
||||
// Insert spritevisuals into layervisuals
|
||||
foreach (var visual in listOfForegroundVisuals)
|
||||
{
|
||||
_foregroundLayerVisual.Children.InsertAtTop(visual);
|
||||
}
|
||||
foreach (var visual in listOfBackgroundVisuals)
|
||||
{
|
||||
_backgroundLayerVisual.Children.InsertAtTop(visual);
|
||||
}
|
||||
}
|
||||
|
||||
#endregion
|
||||
|
||||
#region Initialize Effects and Animations
|
||||
private void CreateEffectAnimations()
|
||||
{
|
||||
// Create saturation effect
|
||||
|
|
@ -238,14 +265,16 @@ namespace CompositionSampleGallery
|
|||
_blurAnimation.Duration = _duration;
|
||||
}
|
||||
|
||||
#endregion
|
||||
|
||||
private Compositor _compositor;
|
||||
private ContainerVisual _root;
|
||||
private ContainerVisual _sceneContainer;
|
||||
private LayerVisual _foregroundLayerVisual;
|
||||
private LayerVisual _backgroundLayerVisual;
|
||||
private float _numVisuals;
|
||||
private Vector2 _spriteSize;
|
||||
private readonly List<SpriteVisual> _listOfForegroundVisuals = new List<SpriteVisual>();
|
||||
private readonly List<SpriteVisual> _listOfBackgroundVisuals = new List<SpriteVisual>();
|
||||
|
||||
private ScalarKeyFrameAnimation _saturationAnimation;
|
||||
private ScalarKeyFrameAnimation _blurAnimation;
|
||||
private CompositionEffectBrush _saturationBrush;
|
||||
|
|
@ -255,3 +284,4 @@ namespace CompositionSampleGallery
|
|||
private bool _foregroundSwitch;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче