I have been trying Microsoft.Expression.Media.Effects to create a MonoChromeEffect on UIElements.
xmlns:e="http://schemas.microsoft.com/expression/2010/effects"
<Border.Effect>
<e: MonochromeEffect Color="Blue" />
</Border.Effect>
This works fine for any control with any Color.
My problem is when attempting to apply to an ImageBrush. (adding blue mono-tint to just the background).
<Border.Background >
<ImageBrush ImageSource="{Binding WaterMarkImage}"
Stretch="UniformToFill" Opacity=".34"
RenderOptions.BitmapScalingMode="HighQuality"
AlignmentX="Center" AlignmentY="Top" />
</Border.Background>
This will colorize all controls inside the Border - (including for instance - ListBoxItems to mono-blue).
Is there anyway to just affect just the ImageBrush - (not the list items - (keep them White)?
You may use a VisualBrush with an Image control instead of an ImageBrush and apply the effect to the Image:
<Border.Background>
<VisualBrush>
<VisualBrush.Visual>
<Image ImageSource="{Binding WaterMarkImage}"
Stretch="UniformToFill" Opacity=".34" ...>
<Image.Effect>
<e:MonochromeEffect Color="Blue"/>
</Image.Effect>
</Image>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
Related
Is there a way to set shadow effect with 0 offset?
It's ugly when I set this effect on a border. I am trying to reproduce the box-shadow css property
Here a sample of code to have some context:
<Border
BorderThickness="1,0,0,1"
Grid.Column="1"
Grid.Row="0"
>
<Border.Effect>
<DropShadowEffect Direction="360" ShadowDepth="5" />
</Border.Effect>
...
</Border>
Try something like this:
<DropShadowEffect ShadowDepth="3" BlurRadius="3" Opacity="0.5" />
You probably want to give your Border some margin too, else the shadow will expand further than you want
Set ShadowDepth to 0, this can remove offset completely.
<DropShadowEffect ShadowDepth="0" BlurRadius="12" Opacity="1" Color="Red" />
ShadowDepth controls offset size, and Direction controls angle
<DropShadowEffect Direction="180" BlurRadius="12" ShadowDepth="12" Color="red"/>
Please can anyone suggest a solution of my problem.
Most "custom buttons" on different tutorials based on standard geometry forms (triangle, rectangle, circle etc.) anŠ² changed only their appearance.
I trying to create button with specific geometry and changed it on mouse event.
what I have:
I created style where diskribe
I created a polygon in the form of a rectangle with rounded corners (this is important)
I created style where described my custom button, and in main window i added the Style attribute:
<Button Width="40" Margin="5,0,5,-15" DockPanel.Dock="Right" HorizontalAlignment="Right" Background="{x:Null}" BorderBrush="{x:Null}" Height="40" Style="{StaticResource ResourceKey=PLCButtonStyle}"/>
this is how i described geometry:
</Style.Resources>
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<Grid>
<MAIN:RoundedCornersPolygon Name="Border" Points="0,0 75,0 75,15 75,30 0,30 "Stretch="Fill"
StrokeThickness="1" ArcRoundness="5" UseRoundnessPercentage="False" Stroke="Black" IsClosed="True
<MAIN:RoundedCornersPolygon.Fill>
<RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3" >
<GradientStop Color="lightgray" Offset="0" />
<GradientStop Color="black" Offset="1" />
</RadialGradientBrush>
</MAIN:RoundedCornersPolygon.Fill>
</SCADA:RoundedCornersPolygon>
I need to animate the transition of certain points of the polygon from one coordinate to another.
from Points="0,0 75,0 75,15 75,30 0,30 "
to Points="0,0 60,0 75,15 60,30 0,30 "
what i need to do for this?
I have a window in my WPF app with an image as a background. I want that image to be blurred. This is how I do it:
This is my window:
<Window x:Class="kiosk.UI.Views.PageSwitch"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:myProjectName.Converters"
Title="PageSwitch" Height="1024" Width="1280"
Style="{StaticResource WindowStyle}"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen">
</Window>
And here's the style I apply to it:
<Style x:Key="WindowStyle" TargetType="{x:Type Window}">
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="Background">
<Setter.Value>
<VisualBrush>
<VisualBrush.Visual>
<Image Source="Images\myImage.png" >
<Image.Effect>
<BlurEffect Radius="20"/>
</Image.Effect>
</Image>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Style>
This works - the image is blurred. However, there's a thick black border of about 5 mm around the background image. Why is it there and how can I remove it?
Here's what I tried as an alternative:
<VisualBrush Viewbox="0, 0, 1280, 1024" ViewboxUnits="Absolute" >
and the border is removed but the image is stretched a lot. Almost half of the image isn't even shown.
How can I fix this?
Do it like shown in this answer to one of your previous questions. Put the Image control in a Grid with ClipToBounds set to true.
<VisualBrush>
<VisualBrush.Visual>
<Grid ClipToBounds="True">
<Image Source="Images\myImage.png">
<Image.Effect>
<BlurEffect Radius="20"/>
</Image.Effect>
</Image>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
I do a similar thing but just add the image as a element to the LayoutRoot. From this I set the margin to minus out the blur radius to avoid blurring in edges. If you're black border fades in I would suspect this is the issue.
<Image Source="pack://siteoforigin:,,,/image.jpg" Stretch="UniformToFill" Margin="-50">
<Image.Effect>
<BlurEffect Radius="100"/>
</Image.Effect>
</Image>
I am trying to design a template to be used with Bing Maps. I have started with the base template and torn a few bits out and added a few more bits, but I am making a bit of a mess of it!
What I am trying to acheive is a pushpin that has what appears to be a tooltip coming out of each side into which I can insert more information (though these are not actually tooltips; they are displayed permanantly based upon a binding property). Something like...
As you can see, I am not much of an artist and have not really gotten very far!
Can somebody help? What I would like is for the orange bars on each side of the pin to be able to contain text based upon a binding (and the bars should grow if required); whilst also being able to hide one or both bars depending on a binding (IsLeftTextVisible/IsRightTextVisible for example, the names do not matter I can change those later) or even if the bound field contains no text.
I would also really like for the orange bars to be a bit nicer; but if somebody can help me get to the point where I can display the text I (hopefully) should be able to take it from there.
Here is the code to produce what I have...
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF">
<ControlTemplate x:Key="PushpinTemplate"
TargetType="{x:Type m:Pushpin}">
<Grid Grid.Name="LayoutRoot"
FrameworkElement.Height="{TemplateBinding FrameworkElement.Height}"
FrameworkElement.Width="{TemplateBinding FrameworkElement.Width}">
<Canvas FrameworkElement.Height="35"
FrameworkElement.HorizontalAlignment="Left"
FrameworkElement.VerticalAlignment="Top"
FrameworkElement.Width="34">
<Path x:Name="CollectionTextPath"
Fill="{TemplateBinding Background}"
Data="M 0,20 H100 V-20 H-0"
Canvas.Left="20"
Stretch="Fill"
Width="100"
Height="18.905"
Canvas.Top="3.19"
RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="DeliveryTextPath"
Fill="{TemplateBinding Background}"
Data="M 0,20 H100 V-20 H-0"
Canvas.Left="-81"
Stretch="Fill"
Width="100"
Height="18.905"
Canvas.Top="4.19"
RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="Path_0"
Stretch="Fill"
StrokeLineJoin="Round"
Stroke="#FF333333"
Fill="#FFFFFFFF"
Data="F1M13.25,0.50001502C20.2917,0.50001502 26,6.2083602 26,13.25 26,17.817347 23.598524,21.823648 19.989363,24.075348 18.67861,25.105957 17.863953,27.531982 17.863953,27.531982L13.21736,39.595642 8.6221838,27.528591C8.6221838,27.528591 7.8198605,25.084908 6.6245556,24.145586 2.952121,21.907652 0.5,17.865215 0.5,13.25 0.5,6.2083602 6.2083402,0.50001502 13.25,0.50001502z"
UseLayoutRounding="False"
Height="39.694"
Width="26"
Canvas.Left="8.282"
Canvas.Top="0.001" />
<Ellipse Height="21"
Width="21"
Fill="{TemplateBinding Background}"
Canvas.Top="2.434"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="10.806"
Stroke="{x:Null}" />
<Ellipse Height="18.905"
Width="18.905"
Canvas.Top="3.19"
Canvas.Left="11.911"
Stroke="{x:Null}">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#00FFFFFF"
Offset="0.438" />
<GradientStop Color="#6EFFFFFF"
Offset="0.987" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<UIElement.RenderTransform>
<TransformGroup>
<TranslateTransform TranslateTransform.X="-4" />
</TransformGroup>
</UIElement.RenderTransform>
</Canvas>
<Grid FrameworkElement.HorizontalAlignment="Center"
FrameworkElement.VerticalAlignment="Top"
FrameworkElement.Margin="0,2,0,0"
FrameworkElement.Height="22"
FrameworkElement.Width="21">
<ContentPresenter ContentPresenter.Content="{TemplateBinding ContentControl.Content}"
FrameworkElement.HorizontalAlignment="Center"
FrameworkElement.VerticalAlignment="Center" />
</Grid>
</Grid>
</ControlTemplate>
<Style x:Key="{x:Type m:Pushpin}"
TargetType="{x:Type m:Pushpin}">
<Setter Property="Template"
Value="{StaticResource PushpinTemplate}" />
</Style>
</ResourceDictionary>
As you might gather, the canvas, grids and ellipses (the bits that look nice) are from the original template. I have then added the two Paths but I am now at a loss as to how to put text inside them (I could probably bind the text without problem if I had somewhere to put it).
I know this is a bit of an ask; but is there somebody who is a bit graphical and could move me forward a bit please. Any help would be appreciated.
I have extended the layout sufficiently.
All i am trying to do create rectangles with radial corners and content within them. Content can be any image, textual data or multimedia something like http://www.spicynodes.org/. so
How do I create that rectangle ( can i have xaml markup)
Can i have arrows from one rectangle to another if so how?
the nearest I got to was below but unable to add text data
<Grid Name="containerPanel" Width="800" Height="500" Background="AntiqueWhite" VerticalAlignment="Center" HorizontalAlignment="Center">
<Rectangle Name="centerNode" Width="300" Height="150" RadiusX="12" RadiusY="12" VerticalAlignment="Center">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="3" BlurRadius="2" Color="Black"></DropShadowEffect>
</Rectangle.Effect>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Gray" Offset="0.1"></GradientStop>
<GradientStop Color="Beige" Offset="0.2"></GradientStop>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.StrokeThickness>
2
</Rectangle.StrokeThickness>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="AliceBlue" Offset="0.4" />
<GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Instead of using a Rectangle, you might want to use a container control. Assuming the content of your will consist of one element (i.e.: Either an image, either a textblock, either a ....), the first thing that comes to mind would be to use a Border, which will accept exactly one child element as its content:
<Border Width="300" Height="200" BorderBrush="Green" BorderThickness="5" CornerRadius="10">
<Border.Effect>
<DropShadowEffect ShadowDepth="5"/>
</Border.Effect>
<TextBlock Text="Inside the bounding box" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
As for the arrows going from one box to another:
Of course it's possible, but you will have to "connect" them manually. There's no out-of-the-box "connect and draw an arrow between these two elements" functionality.
Why not use a container like another grid, style it as you prefer, then add an image or textblock element inside it instead of a rectangle?