I want to create advanced animation with C# UWP.
Animation that would look like this:
Any idea how to achieve this?
I'm not so sure what is under your blur effect. Looks like it is a wave related animation. So let's make your animation to two parts:
See Justin's answer on the following thread, the answer will tell you how you can create a wave animation.
As mentioned above by Jet Chopper, we can add blur brush(CompositionBackdropBrush) based on sample code from this MS doc
So to understand this in a simple way, you can:
Download Justin's sample from here
Add BackdropBlurBrush to his project
Write the following code in MainPage XAML:
<local:WaveProgressControl x:Name="WaveProgressControl" />
<Rectangle Width="200" Height="200" Stroke="Red" StrokeThickness="3" >
<Rectangle.Fill>
<blureffect:BackdropBlurBrush BlurAmount="10"/>
</Rectangle.Fill>
</Rectangle>
The blureffect above refer to the namespace which include your BackdropBlurBrush. In this way you have a basic sample that looks like what you want. You can modify your project based on this.
Related
I was looking in a project and realized that they used some strings like this
<system:String x:Key="icon-arrow-right"></system:String>
and then in a XAML form they used it like this
<Button Content="{StaticResource icon-arrow-right}" />
I wonder how the encoding works and also is there a place to find a list of icons
and their related code like  that I mentioned before?
XAML is essentially xml and that is xml numeric specifying a character.
You can look them up. Often shown as html numeric codes in web pages show such things.
EG α would be alpha.
https://www.rapidtables.com/code/text/unicode-characters.html
You could alternatively find a character from that page and paste it in. Like
<system:String x:Key="icon-alpha">α</system:String>
That would be my preference for a string since you can see it right there.
This is quite a limited way of doing icons though. You ought to get a fairly smooth character if the font size matches what you need because it's true type. But font size doesn't scale.
I tend to use geometries for iconography and fancy lettering. The geometry then defines the data for a path.
I would usually put such geometries in a separate resource dictionary which is merged in app.xaml.
To give you a rough idea.
<Window.Resources>
<Geometry x:Key="icon_Play_Geometry">
"M36,16.8,46.8 36,76.8 36,16.8z"
</Geometry>
</Window.Resources>
<Grid>
<Button>
<Path Fill="Red"
Data="{StaticResource icon_Play_Geometry}"
Stretch="Fill"/>
</Button>
</Grid>
I'd want a bit more sophisticated than just a big triangle fills the button for production code, obviously.
I obtain the geometries using syncfusion metro studio. Which is free. But I think Blend can extract geometries from characters. You can also find svg online and use the geometry out one of those.
For some things where I just have a jpg to work with I use the functionality in inkscape ( which is free ) to automagically "trace" bitmap to vector and export xaml.
I'm currently working on a window that focuses on some elements on screen while blurring the rest of the area.
Using common methods like the WindowCompositionAttribute and the others are not suitable for this situation as there are limitations to it and it doesn't meet the standards regarding the intensity of the blur, contrast and colors which should be strict.
What i have managed to solve my problem was building an image stream with a light image encoder to enhance performance but then that wasn't enough. So, i thought of writing a motion detection algorithm to only steam when there's motion, but it still didn't change the performance drops.
What i need is something like those of the native OSX windows and Windows 10 Start Menu, so how are they created and run efficiently without any heavy load on the performance?
To create a new Window from scratch you have to set WindowsStyle to none (AllowTransparency="True" can be set only along with WindowsStyle="None") and from there build the style of the window.
However, you will face several issues if you follow this approach:
-no buttons (minimize, close)
-no support for fullscreen (taskbar issues)
I would suggest you to have a base view and include the other views inside the main view(which has the blur effect).
The blur effect could be obtained easily by doing something like below:
<Grid>
<Grid Margin="5" Background="#FF3782DC">
<!--<Grid.Background>
<Image Source="test.png"></Image>
</Grid.Background>-->
<Grid.Effect>
<BlurEffect Radius="100" />
</Grid.Effect>
</Grid>
<TextBlock
x:Name="textBlock"
Height="61"
Margin="136,82,211,0"
VerticalAlignment="Top"
Text="test"
TextWrapping="Wrap" />
</Grid>
I've set a color for the background, but you could set an image as background and by default it would be blurred (here you should set a binding and every time the view changes, you have to take a snapshot of the screen and set the source of the Image). However you will probably have some performance issues, but with a good encoder (JPEGencoder) it will be fast enough.
Hope that helps you!
I just started using Geomectry Drawing in xaml and I came across this interesting article https://msdn.microsoft.com/en-us/library/aa480159.aspx. Here, I find out that the following drawingbrush gives a graph diagram as an output.
<DrawingBrush x:Name="gridBackgroundBrush"
Viewport="0,0,10,10"
ViewportUnits="Absolute"
TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Green" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
From further reading, I figure out that M means starting point or move to, L means line and Z means close but could not figure out how this will give me two lines - one horizontal and one vertical? Any help understanding this will be highly appreciated. Thanks.
So here's a quick break down for you.
Your example is a DrawingBrush which is explicitly set to TileMode="Tile" which is the equivalent of repeat-x/repeat-y if you're more familiar with CSS as example. So it's instructed to repeat itself up-down/left-right repeating.
Your two bits of your Geometry Drawing if translated individually are two squares with one stretching vertical, one stretching horizontal. While your explicitly set ViewportUnits is dictating the size and position effectively making repeated columns and rows.
Your Path Geometry uses Path Markup Syntax to draw these lines as you pointed out. For a more visual explanation replace your Brush on each.
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Red" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Blue" />
...and voila! You have yourself a repeated line background with effective vertical/horizontal columns creating your grid. See links for more detail and hope this helps. Cheers!
Oh, and the question you got that from also had a link that would have shed a little light on it but not as much as you'd like so I didn't mark this duplicate.
ADDENDUM:
A little more clarification. Though if you want to learn more I'd follow the documentation link someone spent a lot of time writing to answer this already. Think if you have an x,y grid you're drawing points on.
Say you're using the pen tool in something like Adobe Illustrator, or Blend. Your first click is setting your M as your start point based on the relative size of the container. Then you click in another spot...well now you effectively have a L line.
So when we see: M0,0 L1,0 that's our first starting Line. In this case it's the top corner stretching to the right corner since there's not another anchor in the line between the two points. The next set acts as the anchor to tell that line to change it's direction to make the side, and so on, and so fourth until you hit the end at Z. Hope this helps but I would encourage the documentation first.
Here they are individually if you feel like tinkering with numbers and learning:
<Path Data="M0,0 L1,0 1,0.1, 0,0.1Z"
Height="150" Width="150" Stroke="Red" />
<Path Data="M0,0 L0,1 0.1,1, 0.1,0Z"
Height="150" Width="150" Stroke="Blue" />
I came cross the same thing when I used GMaps V3. It is an SVG path notation path that allows you to draw on WPF and on browsers too. You can find the complete documentation in the link.
I have a number of images and I want to drag every image to a certain point or target.
The problem here is that when I drag the image which I want to get the copy or you can say the clone of that image, it should be able to be dragged any number of times whenever I feel like doing so. Currently, that is not the case and I am unable to make out what should be done here further. This is my code :
<Image Height="100" Width="100" ManipulationStarted="abc_ManipulationStarted" ManipulationCompleted="abc_ManipulationCompleted" x:Name="abc" Source="/Assets/a.png" MouseLeave="abc_MouseLeave">
<Image.RenderTransform>
<CompositeTransform x:Name="ImageTransformation2" ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragDelta="Image_DragDelta4" DragCompleted="GestureListener_DragCompleted" />
</toolkit:GestureService.GestureListener>
</Image>
Appreciate any suggestions or guidance here.
If I understand correctly, you want to clone your image everytime you drag from it.
Then you won't be able to do that on xaml code. You will have to create a new Image object in you C# code-behind and place it where your original image is placed: this will be your new "base image".
What you will really will be moving will be the image you declared via xaml (at least for the first time).
If you need any more assistance, or if I didn't understand the problem correctly please let me know.
I'd like to create a neon(-like) effect in wpf/c#, to be used on a series of polylines.
The closest i come to this was using blur (not very close, but eh), but the it dims the colors too dark and I have no idea how to make even that glow. Is there an effect close to this, or I should try to write a shader for it somehow?
I'd like to do this for a school project and i'd rather not turn in a bunch of outside libraries for a small amount of self-written code. Also about google: most of the stuff i found were pretty much using blur/dropshadow to create these fading colors, not something that actually has this neon-y effect.
As others have already suggested you should use DropShadowEffect to achieve a neon-like effect:
<Canvas Height="120" Width="280" Background="Black">
<Polyline
Points="10,110 60,10 110,110 105,110 60,18 15,110 10,110"
Stroke="#BB0000"
Fill="#FF0000"
StrokeThickness="2" >
<Polyline.Effect>
<DropShadowEffect Color="#FF9999" ShadowDepth="0" Direction="0" BlurRadius="25" />
</Polyline.Effect>
</Polyline>
<Polyline
Points="10,105 110,105 110,10 115,10 115,110 10,110 10,105"
Stroke="#00BB00"
Fill="#00FF00"
StrokeThickness="2"
Canvas.Left="150">
<Polyline.Effect>
<DropShadowEffect Color="#99FF99" ShadowDepth="0" Direction="0" BlurRadius="25" />
</Polyline.Effect>
</Polyline>
</Canvas>
Unfortunately there is no built-in effect which is specifically designed to create neon effect, but by tweaking the colors you can create quite good (or at least acceptable) results (especially for a school project...):