I have a XAML page with this body:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
</Grid>
Now I want to add following controls in the Code Behind into the ContentPanel
<ViewportControl x:Name="viewport" ManipulationStarted="OnManipulationStarted" ManipulationDelta="OnManipulationDelta" ManipulationCompleted="OnManipulationCompleted" ViewportChanged="viewport_ViewportChanged">
<Canvas x:Name="canvas">
<Image x:Name="TestImage" RenderTransformOrigin="0,0" CacheMode="BitmapCache" ImageOpened="OnImageOpened">
<Image.RenderTransform>
<ScaleTransform x:Name="xform"/>
</Image.RenderTransform>
</Image>
</Canvas>
</ViewportControl>
Is there a way to do this by code?
Since
Creating the ViewportControl is OK. Creating the Canvas is OK. But creating the Image and it's "transform-stuff" - here I'm unable to code this
and you don't need to register names you can try this to create Image:
var img = new Image
{
RenderTransformOrigin = new Point(0,0),
CacheMode = new BitmapCache(),
RenderTransform = new ScaleTransform()
};
img.ImageOpened += OnImageOpened;
//and you add it to Canvas
Canvas canvas = new Canvas();
canvas.Children.Add(img);
Related
I have created an ellipse in Windows Phone 8.1 Silverlight App and UWP both
and I wanted to fill it with animating waves,
For this purpose, I am following this solution
but it is for WPF so I am unable to use some control like "Visual Brush".
I wanted to fill ellipse with wave similar to this (ignore 50% in the image) -
And here is my eliipse
<Ellipse Name="WaveEllipse" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="4"
Width="225"
Height="225">
</Ellipse>
any alternate on the visual brush?
mainly I wanted to implement it in Windows Phone 8.1 Silverlight, but I will switch to UWP if it is not available on WP platform
Before giving you the code, have a look at this animated gif below to try to understand how this animation could be created.
Make sense, right? All we need to do is to create a shape like this, animate its offset X(endlessly) and Y(water level), and finally just clip it with an ellipse.
So first you will need to use Adobe Illustrator or similar tools to create this shape. In AI, there's a Zig Zag effect(see screenshot below) that's perfectly for this. You just need to make sure the starting point is at the same position as the ending one, so when you repeat the animation, it will feel like it's never ending.
What's currently missing in UWP is the ability to clip a UIElement with a non-rectangular shape, so here we have to export this as a png (otherwise we would export it as a svg and use Path to display it).
Also for the same reason, the clipping part requires a lot of work. Like in Jet Chopper's answer, that's tons of code to just get a surfaceBrush! Not to mention that you will also need to manually handle device lost and app lifecycle.
Thankfully, in Creators Update(i.e. 15063), there's a new API called LoadedImageSurface that creates a CompositionSurfaceBrush by an image uri with a couple of lines' code. In my code example below, you will see that I use this, which means, if you want to support older versions of Windows 10, you will need to replace it with what's in Jet's answer.
Code
The idea is to create a UserControl called WaveProgressControl which encapsulates all the animation logic and exposes a dependency property called Percent that controls the water level.
The WaveProgressControl control - XAML
<UserControl x:Class="WaveProgressControlRepo.WaveProgressControl"
Height="160"
Width="160">
<Grid x:Name="Root">
<Ellipse x:Name="ClippedImageContainer"
Fill="White"
Margin="6" />
<Ellipse x:Name="CircleBorder"
Stroke="#FF0289CD"
StrokeThickness="3" />
<TextBlock Foreground="#FF0289CD"
FontSize="36"
FontWeight="SemiBold"
TextAlignment="Right"
VerticalAlignment="Center"
Width="83"
Margin="0,0,12,0">
<Run Text="{x:Bind Percent, Mode=OneWay}" />
<Run Text="%"
FontSize="22" />
</TextBlock>
</Grid>
</UserControl>
The WaveProgressControl control - Code-behind
private readonly Compositor _compositor;
private readonly CompositionPropertySet _percentPropertySet;
public WaveProgressControl()
{
InitializeComponent();
_compositor = Window.Current.Compositor;
_percentPropertySet = _compositor.CreatePropertySet();
_percentPropertySet.InsertScalar("Value", 0.0f);
Loaded += OnLoaded;
}
public double Percent
{
get => (double)GetValue(PercentProperty);
set => SetValue(PercentProperty, value);
}
public static readonly DependencyProperty PercentProperty =
DependencyProperty.Register("Percent", typeof(double), typeof(WaveProgressControl),
new PropertyMetadata(0.0d, (s, e) =>
{
var self = (WaveProgressControl)s;
var propertySet = self._percentPropertySet;
propertySet.InsertScalar("Value", Convert.ToSingle(e.NewValue) / 100);
}));
private void OnLoaded(object sender, RoutedEventArgs e)
{
CompositionSurfaceBrush imageSurfaceBrush;
SetupClippedWaveImage();
SetupEndlessWaveAnimationOnXAxis();
SetupExpressionAnimationOnYAxisBasedOnPercentValue();
void SetupClippedWaveImage()
{
// Note LoadedImageSurface is only available in 15063 onward.
var imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri(BaseUri, "/Assets/wave.png"));
imageSurfaceBrush = _compositor.CreateSurfaceBrush(imageSurface);
imageSurfaceBrush.Stretch = CompositionStretch.None;
imageSurfaceBrush.Offset = new Vector2(120, 248);
var maskBrush = _compositor.CreateMaskBrush();
var maskSurfaceBrush = ClippedImageContainer.GetAlphaMask(); // CompositionSurfaceBrush
maskBrush.Mask = maskSurfaceBrush;
maskBrush.Source = imageSurfaceBrush;
var imageVisual = _compositor.CreateSpriteVisual();
imageVisual.RelativeSizeAdjustment = Vector2.One;
ElementCompositionPreview.SetElementChildVisual(ClippedImageContainer, imageVisual);
imageVisual.Brush = maskBrush;
}
void SetupEndlessWaveAnimationOnXAxis()
{
var waveOffsetXAnimation = _compositor.CreateScalarKeyFrameAnimation();
waveOffsetXAnimation.InsertKeyFrame(1.0f, -80.0f, _compositor.CreateLinearEasingFunction());
waveOffsetXAnimation.Duration = TimeSpan.FromSeconds(1);
waveOffsetXAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
imageSurfaceBrush.StartAnimation("Offset.X", waveOffsetXAnimation);
}
void SetupExpressionAnimationOnYAxisBasedOnPercentValue()
{
var waveOffsetYExpressionAnimation = _compositor.CreateExpressionAnimation("Lerp(248.0f, 120.0f, Percent.Value)");
waveOffsetYExpressionAnimation.SetReferenceParameter("Percent", _percentPropertySet);
imageSurfaceBrush.StartAnimation("Offset.Y", waveOffsetYExpressionAnimation);
}
}
The MainPage
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<local:WaveProgressControl x:Name="WaveProgressControl" />
<Slider Grid.Row="1"
Margin="24"
Value="{x:Bind WaveProgressControl.Percent, Mode=TwoWay}" />
</Grid>
I have put everything into this sample project and below is a live demo. Enjoy! :)
Here's the UWP sample. You may adjust it as you wish:
<Canvas>
<Ellipse x:Name="Ellipse" Width="256" Height="256" Fill="DarkViolet" Stroke="DeepSkyBlue" StrokeThickness="8"/>
<Border x:Name="VisualBorder" Opacity="0.5"/>
</Canvas>
And code behind:
private async void CreateVisuals()
{
var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var bitmap = await CanvasBitmap.LoadAsync(CanvasDevice.GetSharedDevice(),
new Uri("ms-appx:///Assets/Wave-PNG-Transparent-Picture.png"));
var drawingSurface =
CanvasComposition.CreateCompositionGraphicsDevice(compositor, CanvasDevice.GetSharedDevice())
.CreateDrawingSurface(bitmap.Size,
DirectXPixelFormat.B8G8R8A8UIntNormalized, DirectXAlphaMode.Premultiplied);
using (var ds = CanvasComposition.CreateDrawingSession(drawingSurface))
{
ds.Clear(Colors.Transparent);
ds.DrawImage(bitmap);
}
var surfaceBrush = compositor.CreateSurfaceBrush(drawingSurface);
surfaceBrush.Stretch = CompositionStretch.None;
var maskedBrush = compositor.CreateMaskBrush();
maskedBrush.Mask = Ellipse.GetAlphaMask();
maskedBrush.Source = surfaceBrush;
var sprite = compositor.CreateSpriteVisual();
sprite.Size = new Vector2((float)Ellipse.Width, (float)Ellipse.Height);
sprite.Brush = maskedBrush;
sprite.CenterPoint = new Vector3(sprite.Size / 2, 0);
sprite.Scale = new Vector3(0.9f);
ElementCompositionPreview.SetElementChildVisual(VisualBorder, sprite);
var offsetAnimation = compositor.CreateScalarKeyFrameAnimation();
offsetAnimation.InsertKeyFrame(0, 0);
offsetAnimation.InsertKeyFrame(1, 256, compositor.CreateLinearEasingFunction());
offsetAnimation.Duration = TimeSpan.FromMilliseconds(1000);
offsetAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
surfaceBrush.StartAnimation("Offset.X", offsetAnimation);
}
}
Here's how it looks like:
I have achieved this using a simple solution:
Wave2.png is a extended ( copy pasted the image and added to the end of the first image ) to make it longer.
The solution works on WP8/Store apps/UWP/Silverlight
<Border
Background="White"
VerticalAlignment="Center"
HorizontalAlignment="Center"
CornerRadius="10000"
BorderBrush="Black"
BorderThickness="5">
<Grid>
<Ellipse
x:Name="ellipse"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="200"
Width="200">
<Ellipse.Fill>
<ImageBrush
x:Name="WaveImage"
Stretch="None"
ImageSource="wave2.png">
<ImageBrush.Transform>
<CompositeTransform
TranslateY="200"
TranslateX="299" />
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="HUJ" />
</Grid>
</Border>
And here is the animation code:
<Storyboard
x:Name="AnimateWave">
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
EnableDependentAnimation="True"
Storyboard.TargetProperty="(Shape.Fill).(Brush.Transform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame
KeyTime="0:0:5"
Value="-299" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
I'm adding a stackpanel to a mapcontrol. like below
But some of the points added before are on the top of my stackpanel. How to set my stackpanel topmost?
XAML:
<Grid x:Name="gridMain">
<maps:MapControl
x:Name="mapControl"
ZoomInteractionMode="GestureAndControl"
TiltInteractionMode="GestureAndControl"
RotateInteractionMode="GestureAndControl">
<!--ZoomLevel="{x:Bind ViewModel.ZoomLevel, Mode=OneWay}"
Center="{x:Bind ViewModel.Center, Mode=OneWay}"-->
<maps:MapItemsControl x:Name="MapItems">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<Grid Tapped="MagPoint_Tapped" maps:MapControl.NormalizedAnchorPoint="{Binding NormalizedAnchorPoint}" maps:MapControl.Location="{Binding Location}">
<Ellipse Canvas.ZIndex="0" Width="{Binding Mag5}" Height="{Binding Mag5}" Fill="{Binding MagColor}"/>
<!--<TextBlock Text="{Binding Mag}"/>-->
</Grid>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
</Grid>
And add panel code.
StackPanel sp = new StackPanel();
sp.Background = new SolidColorBrush(Colors.White);
sp.CornerRadius = new CornerRadius(15);
sp.BorderBrush = new SolidColorBrush(Colors.LightGray);
sp.BorderThickness = new Thickness(1);
sp.Width = 260;
sp.MinHeight = 180;
sp.Padding = new Thickness(10);
Canvas.SetZIndex(sp, 99999);
mapControl.Children.Add(sp);
Windows.UI.Xaml.Controls.Maps.MapControl.SetLocation(sp, new Geopoint(new BasicGeoposition { Longitude = (double)fi.geometry.coordinates[0], Latitude = (double)fi.geometry.coordinates[1] }));
Windows.UI.Xaml.Controls.Maps.MapControl.SetNormalizedAnchorPoint(sp, new Point(0.5, 1));
Your way of setting the ZIndex wouldn't work because the StackPanel and the items inside MapItemsControl are in different hosts.
With the help of Live Visual Tree, you can find out how exactly they get laid out.
In the screenshot above, the StackPanel's host (i.e. the first Canvas) is placed behind the MapOverlayPresenters host (i.e. the second Canvas where MapItemsControl is inserted). So in order to have the StackPanel sit above them, you will need to manually set the ZIndex of the first Canvas to 1.
Once you understand this, the solution becomes simple -
Loaded += (s, e) =>
{
// GetChildByName comes from
// https://github.com/JustinXinLiu/Continuity/blob/0cc3d7556c747a060d40bae089b80eb845da84fa/Continuity/Extensions/UtilExtensions.cs#L44
var layerGrid = mapControl.GetChildByName<Grid>("LayerGrid");
var canvas1 = layerGrid.Children.First();
Canvas.SetZIndex(canvas1, 1);
};
Hope this helps!
I'm completely new to WPF and I need some help putting an image in my progress bar (programmatically).
I found this (and it works):
<ProgressBar.Template>
<ControlTemplate>
<Grid>
<Image Name="PART_Track" Source="MyImage" Stretch="Fill"/>
<Rectangle Name="PART_Indicator" Fill="BlanchedAlmond" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</ProgressBar.Template>
I just need some help converting that XAML code to C# code.
This will get you started :
FrameworkElementFactory grid = new FrameworkElementFactory(typeof(Grid));
FrameworkElementFactory image = new FrameworkElementFactory(typeof(Image));
image.Name = "PART_Track";
ImageSource source = new BitmapImage(...); // create it
image.SetValue(Image.SourceProperty, source);
image.SetValue(Image.StretchProperty, Stretch.Fill);
grid.AppendChild(image);
FrameworkElementFactory rectangle = new FrameworkElementFactory(typeof(Rectangle));
rectangle.Name = "PART_Indicator";
rectangle.SetValue(Rectangle.FillProperty, new SolidColorBrush(Colors.BlanchedAlmond));
rectangle.SetValue(Rectangle.HorizontalAlignmentProperty, HorizontalAlignment.Left);
grid.AppendChild(rectangle);
ControlTemplate ct = new ControlTemplate(typeof(ProgressBar));
ct.VisualTree = grid;
MyProgressBar1.Template = ct;
I would like to create a border over the WindowsFormsHost. How to do so?
In .cs file:
WindowsFormsHost Host = new WindowsFormsHost();
and in the xaml:
<WindowsFormsHost x:Name="Host"></WindowsFormsHost>
The System.Windows.Border class is a type of Decorator, which means it can have a single Child element. In this case, your child would be the WindowsFormsHost.
XAML:
<Border BorderBrush="Green" BorderThickness="1">
<WindowsFormsHost x:Name="Host"></WindowsFormsHost>
</Border>
Use the border class:
xaml:
<Border BorderThickness="1" BorderBrush="Green">
<WindowsFormsHost x:Name="Host"></WindowsFormsHost>
</Border>
cs:
var myBorder = new Border();
myBorder.BorderBrush = Brushes.Green;
myBorder.BorderThickness = new Thickness(1);
myBorder.Child = new WindowsFormsHost();
I have been stumped with trying to convert the following code into pure c#. This XAML code is from Cavanaghs blog on how to make rounded corners on anything. The code works but I need to convert it to c# as i need it to be dynamic in some cases. If you could help that would be great.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType='{x:Type ListViewItem}'>
<Grid>
<Border CornerRadius="15" Name="mask" Background="White"/>
<StackPanel Background="Beige">
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
<GridViewRowPresenter Content="{TemplateBinding Content}" Columns="{TemplateBinding GridView.ColumnCollection}"/>
<TextBlock Background="LightBlue" Text="{Binding News}" />
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
So far I have the following but I am getting errors.
FrameworkElementFactory border = new FrameworkElementFactory(typeof(Border));
border.SetValue(Border.BackgroundProperty, Brushes.White);
border.SetValue(Border.CornerRadiusProperty, new CornerRadius(8, 8, 8, 8));
border.SetValue(Border.NameProperty, "roundedMask");
As far as I can tell I cant make the VisualBrush as a FrameworkElementFactory (crashes), but if i declare it as a regular element VisualBrush i cant pass border in as a Visual since its a FrameworkElementFactory.
Simply i am getting lost, any help would be appreciated.
Thanks for any help
You don't actually have to convert this into C# to apply it dynamically. If you add it to your application resources, within your App.xaml file as follows:
<Application.Resources>
<ControlTemplate TargetType='{x:Type ListViewItem}' x:Key="MyListViewItemTemplate">
<Grid>
<Border CornerRadius="15" Name="mask" Background="White"/>
<StackPanel Background="Beige">
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
<GridViewRowPresenter Content="{TemplateBinding Content}" Columns="{TemplateBinding GridView.ColumnCollection}"/>
<TextBlock Background="LightBlue" Text="{Binding News}" />
</StackPanel>
</Grid>
</ControlTemplate>
</Application.Resources>
Note the x:Key attribute which keys this item.
You can then look it up anywhere in your code ...
ControlTemplate template = this.Findresource("MyListViewItemTemplate") as ControlTemplate
You can then apply it as and when you need it!
You do not want to know this. Seriously, you don't, it's a nightmare.
Edit: If i did not make any mistake this is the translation of your code...
Setter setter = new Setter();
setter.Property = ListViewItem.TemplateProperty;
ControlTemplate template = new ControlTemplate(typeof(ListViewItem));
var grid = new FrameworkElementFactory(typeof(Grid));
var border = new FrameworkElementFactory(typeof(Border));
border.SetValue(Border.BackgroundProperty, Brushes.White);
border.SetValue(Border.NameProperty, "mask");
border.SetValue(Border.CornerRadiusProperty, new CornerRadius(15));
grid.AppendChild(border);
var stackPanel = new FrameworkElementFactory(typeof(StackPanel));
stackPanel.SetValue(StackPanel.BackgroundProperty, Brushes.Beige);
var visualBrush = new FrameworkElementFactory(typeof(VisualBrush));
visualBrush.SetBinding(VisualBrush.VisualProperty, new Binding() { ElementName = "mask" });
stackPanel.SetValue(StackPanel.OpacityMaskProperty, visualBrush);
var gridViewRowPresenter = new FrameworkElementFactory(typeof(GridViewRowPresenter));
gridViewRowPresenter.SetValue(GridViewRowPresenter.ContentProperty, new TemplateBindingExtension(GridViewRowPresenter.ContentProperty));
gridViewRowPresenter.SetValue(GridViewRowPresenter.ColumnsProperty, new TemplateBindingExtension(GridView.ColumnCollectionProperty));
stackPanel.AppendChild(gridViewRowPresenter);
var textBlock = new FrameworkElementFactory(typeof(TextBlock));
textBlock.SetValue(TextBlock.BackgroundProperty, Brushes.LightBlue);
textBlock.SetBinding(TextBlock.TextProperty, new Binding("News"));
stackPanel.AppendChild(textBlock);
grid.AppendChild(stackPanel);
template.VisualTree = grid;
setter.Value = template;
Edit: There is still a bug left, the VisualBrush cannot be created like that, the rest seems to work.