i am learning to create custom control in XAML.
I want correct symbol as shown below on one of my buttons
how can I get it using Path.Data/Geometry?
is there any tool to generate this code.
Personally I prefer using Adobe Illustrator or Fireworks with the XAML export plugins available free online like Mike Swanson's http://www.mikeswanson.com/xamlexport/
Or if you're familiar with Expression Blend the pen tool would make short work of a path like that. Either give you pretty clean resulting xaml.
For now though to get you by, here's an example of your checkmark, but you might play with the color values to make it look exactly the same as I didn't spend but a minute making it.
<Path StrokeThickness="1.0" Stroke="#ff009344" StrokeMiterLimit="1.0" Data="F1 M 0.500,5.574 L 0.500,9.324 L 4.333,12.823 L 6.000,12.823 L 13.583,4.907 L 13.583,1.241 L 6.000,9.116 L 4.292,9.157 L 0.500,5.574 Z">
<Path.Fill>
<LinearGradientBrush MappingMode="Absolute" StartPoint="306.048,-391.325" EndPoint="307.800,-401.261">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#ff8cc63e"/>
<GradientStop Offset="1.00" Color="#ff38b449"/>
</LinearGradientBrush.GradientStops>
<LinearGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-299.500,-388.843" />
</LinearGradientBrush.Transform>
</LinearGradientBrush>
</Path.Fill>
</Path>
If you're going to be working with Paths and the design part of Controls often though, Expression Blend is the best for SL4/WPF but Blend 5 is still lacking some functionality. Hope this helps.
Related
Say I have a rectangle in silverlight that I created in Blend. How can I change the background fill on the object.
XAML
<Rectangle x:Name="Background" Stroke="Black" StrokeThickness="0" Height="480" Width="640">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FED40707" Offset="0.164"/>
<GradientStop Color="#FED5EB0E" Offset="0.392"/>
<GradientStop Color="#FE849AF4" Offset="0.595"/>
<GradientStop Color="#FE2C9937" Offset="0.797"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
.cs file
Rectangle Background = new Rectangle();
string fileName = "Images/yello.png";
BitmapImage image = new BitmapImage(new Uri(fileName, UriKind.Relative));
ImageBrush brush = new ImageBrush();
brush.ImageSource = image;
Background.Fill = brush;
Background.UpdateLayout();
This runs but nothing happens. Also how can I debug this code. I loaded the project file into VS 2012 but when it runs it won't stop on breakpoints.
Also tried:
Background.Fill = new SolidColorBrush(Colors.Red);
Your .cs code fails as you are newing a rectangle called Background, that has nothing to do with the element named Background in your XAML file.
When you name an element in a XAML file, a C# member of that name is generated in the designer file and that property is connected to the XAML element (via a search by name of the loaded XAML element tree). That means that all named elements can simply be referenced as properties in the code behind. Take a look in your designer file to get a feel for what is going on behind the scenes.
Remove the Rectangle Background = new Rectangle(); line and try again. You also should not need to call Background.UpdateLayout();
You also probably want to choose another name, rather than Background, for your rectangle element as that may cause confusion with the Background property of all Panel elements
There may be other problems, but best you sort out these ones first :)
Ribbon is nice. I want to make it nicer... (IMHO)
With the Ribbon (from RibbonControlsLibrary on .NET 3.5 sp1), it is ok to change some backgrounds and foregrounds. But the thing I want to re-style is the white "mask" (linear gradient brush with alpha) that seats in the "background" of the RibbonTabGroup. I saw it with Snoop. I found it in the style.
<LinearGradientBrush x:Key="[49] Í" StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Color="#EEFFFFFF" Offset="0.0" />
<GradientStop Color="#BBFFFFFF" Offset="0.1" />
<GradientStop Color="#05FFFFFF" Offset="0.5" />
<GradientStop Color="#20FFFFFF" Offset="1.0" />
</LinearGradientBrush>
But still I have no idea how to override it. I don't know either where it is set...
Cheers, Patrick
I got it!
With help of the following post Serialize a UserControl to xaml, but not its children? [Many thanks to you Will]. I could extract the "default" style. So I obtain the complete style. What I did before, open RibbonControlsLibrary with .NET Reflector and read the XAML with BAML Viewer. Not ideal in my case.
Just in case someone has the same wish, obtaining the default style of component (when it isn't published #MSDN):
System.Windows.Style style = Application.Current.FindResource(typeof(Microsoft.Windows.Controls.Ribbon.Ribbon)) as System.Windows.Style;
var sb = new System.Text.StringBuilder();
var writer = System.Xml.XmlWriter.Create(sb, new System.Xml.XmlWriterSettings
{
Indent = true,
ConformanceLevel = System.Xml.ConformanceLevel.Fragment,
OmitXmlDeclaration = true
});
var mgr = new System.Windows.Markup.XamlDesignerSerializationManager(writer);
mgr.XamlWriterMode = System.Windows.Markup.XamlWriterMode.Expression;
System.Windows.Markup.XamlWriter.Save(style, mgr);
string styleString = sb.ToString();
Cheers, Patrick
I want to create an area in my application that looks draggable. Usually, you see this done with a background of small dots or squares, or sometimes lines. I'm using Silverlight and I want to simply create a background that is a set of repeating small rectangles. I honestly cannot figure out how to generate a background with xaml. I'd rather not have to create every little rectangle -- this will also cause the control not to scale. Is there some way to repeat xaml elements to form a pattern? This would be similar to CSS repeating backgrounds, but I would like to use xaml instead of images.
You can use a brush, like this:
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="6,6" StartPoint="2,2" SpreadMethod="Repeat" MappingMode="Absolute">
<GradientStop Color="#FFAFAFAF" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
<GradientStop Color="#00FFFFFF" Offset="0.339"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I've nicked this particular example from the excellent blacklight project, you'll need to play around with all the different settings to see what does what. I'm guessing a radial brush will allow you to get dots, etc. I think they created it in blend as all the numbers were crazy decimals until I sanitised them a bit.
I am trying to make my application more customizable by allowing users to pick a color from a Color Picker dialog, and then changing the style of the application in real time (with DynamicResource)
How do I go about in changing specific resources that reside in the app.xaml ?
I have tried something like this but no luck (just a test):
var colorDialog = new CustomControls.ColorPickerDialog();
var dResult = colorDialog.ShowDialog();
var x = Application.Current.Resources.Values.OfType<LinearGradientBrush>().First();
x = new LinearGradientBrush();
x.GradientStops.Add(new GradientStop(colorDialog.SelectedColor,1));
This an excerpt of the app.xaml file:
<Application.Resources>
<LinearGradientBrush x:Key="HeaderBackground" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#82cb02" Offset="1"/>
<GradientStop Color="#82cb01" Offset="0.2"/>
<GradientStop Color="#629a01" Offset="0.5"/>
</LinearGradientBrush>
</Application.Resources>
What is the best way to allow this form of customizability (basically just changing some colors) to an application?
[Update]
I just found this answer from a previous question that was asked, and tried it but I am getting the same InvalidOperationException exception Petoj mentioned in the comments for the given answer. Here is the sample code from the answer:
Xaml:
<LinearGradientBrush x:Key="MainBrush" StartPoint="0,0.5" EndPoint="1,0.5" >
<GradientBrush.GradientStops>
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Black" Offset="1" />
</GradientBrush.GradientStops>
</LinearGradientBrush>
C#:
LinearGradientBrush myBrush = FindResource("MainBrush") as LinearGradientBrush;
myBrush.GradientStops[0].Color = Colors.Red;
It looks like you're trying to do some sort of skinning?
I'd recommend defining the resources in a Resource Dictionary contained in a separate file. Then in code (App.cs to load a default, then elsewhere to change) you can load the resources as so:
//using System.Windows
ResourceDictionary dict = new ResourceDictionary();
dict.Source = new Uri("MyResourceDictionary.xaml", UriKind.Relative);
Application.Current.Resources.MergedDictionaries.Add(dict);
You could also define the default resource dictionary in App.xaml and unload it in code just fine.
Use the MergedDictionaries object to change the dictionary you're using at runtime. Works like a charm for changing an entire interface quickly.
Changing application wide resources in runtime is like:
Application.Current.Resources("MainBackgroundBrush") = Brsh
About the InvalidOperationException, i guess WallStreet Programmer is right.
Maybe you should not try to modify an existing brush, but instead create a new brush in code with all the gradientstops you need, and then assign this new brush in application resources.
Another Approach on changing the color of some GradientStops is to define those colors as DynamicResource references to Application Wide SolidColorBrushes like:
<LinearGradientBrush x:Key="MainBrush" StartPoint="0, 0.5" EndPoint="1, 0.5" >
<GradientBrush.GradientStops>
<GradientStop Color="{DynamicResource FirstColor}" Offset="0" />
<GradientStop Color="{DynamicResource SecondColor}" Offset="1" />
</GradientBrush.GradientStops>
and then use
Application.Current.Resources["FirstColor"] = NewFirstColorBrsh
Application.Current.Resources["SecondColor"] = NewSecondColorBrsh
HTH
Use the Clone() method to make a deep copy of the brush (or any other freezable object like Storyboard) and then use it:
LinearGradientBrush myBrush = FindResource("MainBrush") as LinearGradientBrush;
myBrush = myBrush.Clone();
myBrush.GradientStops[0].Color = Colors.Red;
#WallstreetProgrammer is right - all application level resources are frozen by default.
Thats why you need to clone the object first.
You get an exception because you are trying to modify a frozen object. All application level resources are automatically frozen if they are freezable and LinearGradientBrush is. If you add it on a lower level like window level it will work.
If I had a Canvas with n number of Visual objects of any shape or size, how would I highlight/outline a Visual object programmatically?
Is there something built into WPF to help me?
Having read the comments in the other answer -- in which you state that you wish the outline to conform to the shape of the visual -- I can only suggest you take a look at the BitmapEffects. There is one for an Outer Glow effect.
Duplicating the visuals themselves would probably be less efficient, and would probably produce a great number of complications due to other aspects of those items, such as any bindings.
Edit: In .NET 4.0, BitmapEffects property and the BitmapEffect class are obsolete. You'll get an exception thrown. Instead, you now have the System.Windows.Media.Effects.Effect class and its derived classes, along with properties such as Visual.VisualEffect.
Joel has a great suggestion about using BitmapEffects.
However, if you can use .NET 3.5 SP1, I would steer you toward GPU rendered effects. So, instead of using UIElement.BitmapEffect, you would use UIElement.Effect. .NET 3.5 SP1 has two GPU effects built in: BlurEffect and DropShadowEffect. You can also create your own GPU effects ... and this is where you would use ShaderEffect.
Check out Greg Schechter's blog post series for more info.
Here is a piece of code for a mouse over effect that I just implemented a few days ago (it actually shows up sort of like an outer glow bitmap effect due to the ShadowDepth being 0, but not exactly):
<Path
x:Name="mouseOverEffect"
Width="80"
Height="43.916"
Stretch="None"
Fill="#FFFFFFFF"
Opacity="0"
>
<Path.Data>
<PathGeometry FillRule="Nonzero">
<PathFigure IsClosed="True" StartPoint="39.9592899612151,25.9913931634531">
<LineSegment Point="80.0000001464848,43.9159987905149"/>
<LineSegment Point="39.9513899394755,4.97379893856246E-14"/>
<LineSegment Point="1.77635636294422E-15,43.9159987905149"/>
<LineSegment Point="39.9592899612151,25.9913931634531"/>
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.Effect>
<DropShadowEffect
Color="#FFFFFFFF"
BlurRadius="10"
ShadowDepth="0"
/>
</Path.Effect>
</Path>
If you wrap those Visual objects in a Border ... and make the Opacity 0 by default ... then you could programmatically turn the Opacity to 1 whenever you need to.
Does that help?