Sunday, November 18, 2012

Creating Compound Paths with Expression Blend

There may be a time when you need to create an effect where you are looking THROUGH an item, and lining up artwork to make it look that way is difficult and unpredictable. My favorite technique to take care of this is using compound paths in order to see what is behind an item.

The following screens show an extremely basic example of how to create a usable compound path shape.

1. Draw a basic ellipse

2. Draw another ellipse on top, this one is smaller to create a thick border effect.

3. To see how the shape is now "see through" I put a yellow rectangle in the background

 4. Select both ellipses, and then go to the top menu "Object" > "Path" > "Make Compound Path"

5. This is the result, you will now see the yellow rectangle through the circle.

I also used this technique to create text where each letter can have a different gradient color or a separate blend angle. 

1. I created the text box, and then converted the text to paths. With the TextBlock or TextBox selected go to "Object" > "Path" > "Convert To Paths"

After this, the text has been converted to different path sections, however they are still a compound path (the text is a compound path to begin with so the letters look right) and need to have the compound paths "released".  

"Object" > "Path" > "Release Compound Path"

Now the text will become solid shapes, you won't see the inside of the "P" nor the inside shape of the "A"

Select both paths that make up the "P" and make those into a compound path, then select the paths that make up the "A". Doing this with all the paths selected, they will be connected and you will not be able to give them each a separate fill.

This is a lot easier than trying to draw any text or number shape to be used in a design or control.

The screenshots below show a border with a compound path and how it displays the color(s) behind it. Now, I can simply change the color of either the background or of the blue ellipse in a control, instead of changing an entire group (the border, background and the ellipse). 

This is  the "animation" using the example. When you mouseover the button, the only change is the opacity of the element in the background. The blue one is visible when normal, but opacity is zero when mouseover with the red one now having an opacity of 85%.

Link to example 
NOTE: The design work is done in the file "CompoundPath.xaml" - but the button style is defined in a resource dictionary where I copied the design over and then added the animations using the button's existing template. It is included in the downloadable file for reference. 

I have uploaded the project here. I'm going to continue to update this as I create new examples and test out new ways to design using Blend and making it easier for me to create layouts even faster. :)

Tuesday, November 13, 2012

Error while rendering XAML in the designer view

Error message in Visual Studio 2010

Error message shown in Blend (Note: The window in Blend is much shorter, I spliced together two screenshots to show the full error message)

Fixed the error by going through the page (or control) and deleting all of the "d:LayoutOverride" commands that were inserted while designing in Blend.

Not sure why this worked, even had the mc:Ignorable="d" in the header, but it worked.

Monday, November 12, 2012

Problem ChildWindow

Today graced me with this new (ok, kind of new - the verbiage is always the same but never does mean the same depending on how you hold your head or cross your eyes) error:

throw new
Error("Unhandled Error in Silverlight Application Cannot resolve TargetName contentPresenter.  
at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)\n  
at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)\n  
at System.Windows.Controls.Primitives.ToggleButton.ChangeVisualState(Boolean useTransitions)\n  
at System.Windows.Controls.Primitives.ButtonBase.UpdateStateFlags(Boolean disable)\n  
at System.Windows.Controls.Primitives.ButtonBase.OnIsEnabledChanged(IsEnabledChangedEventArgs e)\n  
at System.Windows.Controls.Control.OnIsEnabledChanged(Control control, EventArgs args)\n  
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName, UInt32 flags)");

Turns out, it wasn't throwing an error based on the button being used to fire the event/open the window nor was it the window itself. It was another control on the page that had a "contentPresenter" that didn't even communicate with the window itself.

It seems that the child window (modal since it is Silverlight) sent all of the controls that were active on the page into the disabled state - and ONE of them had the issue with not being able to find "contentPresenter". So, it was the one user control... all the way over to the right and not talking to the child window that was being the problem child after all.

Tuesday, October 23, 2012

Fixed My Silverlight 2103 error

I was going through EVERY post I could find on how to fix the dreaded Silverlight 2301, white screen of death, shows nothing error.

I had the namespace right in the properties, my App.xaml and App.xaml.cs were right, my AppManifest was right. I FINALLY found my answer in one of the comments after the post

In Alex's blog, he posts the answer with the namespace and matching startup object (like I mentioned I had tried this many times. Even tried changing to the wrong one and then back to the right one. The monitor almost went flying, but there were witnesses) But one of the comments left on his blog was exactly what I needed, and worked like a charm!

  re: Quick Silverlight Tip: "InitializeError #2103 - Invalid or malformed application" what is it and how to deal with it?

OK, here's another thing that can cause it:
Two resources with the same key in App.xaml (or probably any other xaml file).
<Color x:Key="DefaultTextForeground>#FF000000</Color>
<Color x:Key="DefaultTextForeground>#FF000000</Color>
Compiles fine, just get the wonderful Initialize Error #2103.
 Thank you VERY much Mr. Geoff T (that part didn't copy over on here) but you definitely solved my problem and saved my hairline.

So, for me the solutions have been:

1. Check on the properties to make sure the namespaces match up to the solution (Alex describes this well in his blog)
2. Make sure that your XAML styles don't have any repeat names. Mine compiled because the duplicate names were in different resource files (oops). I checked on the new ones I added and searched to see if I had already named a style or color the same name. 

I had the error again, and went through the steps above (again). Of course I found one name duplicated - but it still gave me the error when I tried to Debug.

I ran across this post and decided to try it. Basically, all I did was go into the properties - change to something else and then change it BACK to the setting it was supposed to be. 

For some unknown reason - it actually worked. 

Saturday, September 29, 2012

The kool-aid looks yummy

Here with my daughter, she is paying for her own phone upgrade and is choosing between an iPhone 4S or the iPhone 5. There is a noticeable difference in thickness - but didn't see one in the height or width.
Maybe later, I am just taking advantage of being here so I can upgrade my phone OS and grab someone if it goes south on me.

It's dangerous to post from their sample laptops - I so WANT ONE now. I know this is how you taste the kool-aid and then figure out you really do like the fruit punch over the grape.

Wednesday, September 12, 2012

Floating Window Default Styles - Extracted Using Blend

I wanted to customize the style for the Floating Window (you can find it here... it allows Silverlight to have a "modeless" window). Will post more information on using this control when I know more about what I am doing.

Below are the styles and templates that Blend Extracted when I chose "Edit Template > Edit A Copy"

<!-- For the FloatingWindowHost styles and controls-->
                    <Style x:Key="BootstrapButtonStyle" TargetType="my:BootstrapButton">
                        <Setter Property="Width" Value="24"/>
                        <Setter Property="Height" Value="24"/>
                        <Setter Property="BorderBrush" Value="#FFA2ADB8"/>
                        <Setter Property="Background" Value="#FF4E4E4E"/>
                        <Setter Property="VerticalAlignment" Value="Top"/>
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter Property="Template">
                                <ControlTemplate TargetType="my:BootstrapButton">
                                    <Grid Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding Width}">
                                            <VisualStateGroup x:Name="CommonStates">
                                                    <VisualTransition GeneratedDuration="0"/>
                                                <VisualState x:Name="Disabled">
                                                        <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                <VisualState x:Name="Normal"/>
                                                <VisualState x:Name="MouseOver">
                                                        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                <VisualState x:Name="Pressed">
                                                        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                        <DoubleAnimation By="1" Duration="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="PART_Arrow"/>
                                            <VisualStateGroup x:Name="ButtonStates">
                                                <VisualState x:Name="Open">
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                                <CubicEase EasingMode="EaseOut"/>
                                                <VisualState x:Name="Close">
                                                        <DoubleAnimation Duration="0:0:0.4" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                                <CubicEase EasingMode="EaseOut"/>
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="PART_Arrow"/>
                                                <LinearGradientBrush EndPoint="0.691,0.972" StartPoint="0.307,0.037">
                                                    <GradientStop Color="#FFA2ADB8"/>
                                                    <GradientStop Color="White" Offset="1"/>
                                        <Ellipse Margin="1">
                                                <LinearGradientBrush EndPoint="0.631,1" MappingMode="RelativeToBoundingBox" StartPoint="0.29,0.045">
                                                    <GradientStop Color="#FFB8C3C8" Offset="1"/>
                                                    <GradientStop Color="#FFE7EBED" Offset="0.27"/>
                                        <Path x:Name="PART_Arrow" Data="M27.671843,6 L31.333334,2 L35.02343,6 z" Fill="#FF686D76" HorizontalAlignment="Center" Height="4" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="8">
                                                <CompositeTransform TranslateY="-1"/>
                    <Style x:Key="BottomBarStyle" TargetType="Border">
                        <Setter Property="Height" Value="24"/>
                        <Setter Property="Background" Value="#FFE7EBED"/>
                        <Setter Property="BorderThickness" Value="0,1,0,0"/>
                        <Setter Property="BorderBrush" Value="#FFFEFEFE"/>
                    <Style x:Key="FloatingWindowHostOne" TargetType="my:FloatingWindowHost">
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="Height" Value="Auto"/>
                        <Setter Property="SnapinEnabled" Value="True"/>
                        <Setter Property="SnapinDistance" Value="5"/>
                        <Setter Property="SnapinMargin" Value="0"/>
                        <Setter Property="ShowMinimizedOnlyInIconbar" Value="False"/>
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="OverlayBrush" Value="#90202030"/>
                        <Setter Property="Background" Value="#FF7ED2E9"/>
                        <Setter Property="Template">
                                <ControlTemplate TargetType="my:FloatingWindowHost">
                                    <Grid x:Name="PART_Root" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                            <VisualStateGroup x:Name="OverlayStates">
                                                <VisualState x:Name="VisibleOverlay">
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <VisualState x:Name="HiddenOverlay">
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                        <Grid x:Name="PART_ContentRoot">
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                            <Canvas x:Name="PART_HostCanvas"/>
                                            <Grid x:Name="PART_IconBarContainer" VerticalAlignment="Bottom">
                                                <my:IconBar x:Name="PART_IconBar"/>
                                            <Border Visibility="Collapsed" x:Name="PART_BottomBar" Grid.Row="1" Style="{StaticResource BottomBarStyle}">
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                    <my:BootstrapButton x:Name="PART_BootstrapButton" IsOpen="{Binding IsOpen, ElementName=PART_IconBar}" Margin="10,-4,10,0" Style="{StaticResource BootstrapButtonStyle}"/>
                                                    <Border Grid.Column="1">
                                                        <ContentControl x:Name="PART_BarContent" Content="{TemplateBinding Bar}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                                        <Grid x:Name="PART_Overlay" Background="{TemplateBinding OverlayBrush}" Opacity="0" />
                                        <Canvas x:Name="PART_ModalCanvas"/>

Sunday, August 12, 2012

Creating a simple control with dimension

This was the original reason a co-worker suggested I blog some of my work. It is a relatively simple design trick but he really liked it and liked the fact it was easy and didn't require a lot of reworking to get the effect.

Step 1: I created a UserControl that contained a simple shape (in this case a circle) - for this example it will use chrome style brushes. I haven't worked with solid or gradient brushes - that will be later after I figure out the Silverlight charts a bit more. (The charts are for a current assignment, but I do want to catch up on documenting what I have been able to accomplish)
The user control also has a drop shadow applied to the shape - this helps with the final artwork having the look of dimension.
The image above shows the final basic user control.

Step 2. Created a new document (UserControl) where I imported the basic control, and copied and pasted several times. Each subsequent layer reduced using the the transform tool in Blend. (This example uses the preview of Blend 5 available from Microsoft. )
This moved the position of the chrome brushes up slightly, giving the appearance they were still using the same reflection but one was above the other.
Above is a closeup of the positioning of each control layer - they all have the exact same center, but by reducing the size the chrome effect of the brushes moves up slightly. Also, the border has a different chrome style brush than the fill does. The difference is very slight but it helps with the dimensional effect.

Step 3. Layer the control to achieve the desired affect. Below shows the complete dimensional control. When using a "curved" chrome brush - it really helps the effect pop. But, that will be a separate post since I am still catching up on figuring out a bit more coding.

Not the perfect representation, but it is all XAML, and you only have to make the image once to reuse on several other controls or pages. Could also be a good button background.

I have uploaded the files here for you to play with. It includes the brushes as well.

Wednesday, May 23, 2012

Changing the color of Area Chart Fill without C#

After looking over several websites, googling like crazy, and finding all sorts of complicated code I took notes of and still just didn't understand, I finally figured out how to "easily" change the color of the area chart fill.

Below is the basic, every day area chart - default blue color:

Below is the code I wrote to create the chart (the points are set in the code behind, I didn't want to mess up this code with the points set inline):

    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
            <toolkit:Chart Title="Area Series Fill" x:Name="AreaSeriesFill" BorderBrush="Transparent" Width="640" Height="480">
                    <toolkit:LinearAxis x:Name="AxisOne" Foreground="Black"
                                        Title="Width" ShowGridLines="True"
                                        Orientation="X" Minimum="0" Maximum="40" Interval="5"/>
                    <toolkit:LinearAxis x:Name="AxisTwo" Foreground="Black" Title="Height"
                                        ShowGridLines="True" Orientation="Y" Minimum="0" Maximum="40" Interval="5"/>
                <toolkit:AreaSeries Title="Change Color" x:Name="changecolor" ItemsSource="{Binding}"
                                    IndependentValueBinding="{Binding Width}" DependentValueBinding="{Binding Height}"/>

I want to have the area below the plotted line (the fill) in red, and of course the corresponding Legend Item in the same color.

Here is the updated chart with the new color.

Below is the section of updated code:

<toolkit:AreaSeries Title="Change Color" x:Name="changecolor"
                                    IndependentValueBinding="{Binding Width}"
                                    DependentValueBinding="{Binding Height}">
                        <Style TargetType="toolkit:DataPoint">
                            <Setter Property="Background" Value="Red" />

The highlighted area is the updated code.
All I did was add the DataPointStyle and set the background color. However, the area is not solid, and looks pink (not what I wanted) so I have to update the Opacity as well.

Below is the code for the brighter chart:

<toolkit:AreaSeries Title="Change Color" x:Name="changecolor"
                                    IndependentValueBinding="{Binding Width}"
                                    DependentValueBinding="{Binding Height}" IsHitTestVisible="False">
                        <Style TargetType="toolkit:DataPoint">
                            <Setter Property="Background" Value="Red" />
                            <Setter Property="Opacity" Value="1.0" />
                        <Style TargetType="toolkit:AreaSeries">
                            <Setter Property="PathStyle">
                                    <Style TargetType="Path">
                                        <Setter Property="Opacity" Value="1.0" />

The opacity is set using the AreaSeries.Style - pointing to a PathStyle. 

I was SO HAPPY to find a much easier way to change the colors, I really was not looking forward to coding upteen too many lines.

Hope this is helpful to someone else too.

PS: Below is the VERY basic code behind that I used to create the points for this graph:

using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Ink;
using System.Globalization;
using System.Threading;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Controls.DataVisualization;
using System.ComponentModel;
using System.Windows.Shapes;

namespace XAMLTestingScreens
    public partial class AreaChartExample : UserControl
        public AreaChartExample()
            // Required to initialize variables
            this.LayoutRoot.DataContext = this;
            this.Loaded += new RoutedEventHandler(UC_Loaded);
        void UC_Loaded (object sender, RoutedEventArgs e)
            List<ColorChangePoints> colorchange = new List<ColorChangePoints>();
            colorchange.Add(new ColorChangePoints() {Width=0,Height=0});
            colorchange.Add(new ColorChangePoints() {Width=5,Height=10});
            colorchange.Add(new ColorChangePoints() {Width=10,Height=20});
            colorchange.Add(new ColorChangePoints() {Width=15,Height=15});
            colorchange.Add(new ColorChangePoints() {Width=20,Height=30});
            colorchange.Add(new ColorChangePoints() {Width=25,Height=15});
            colorchange.Add(new ColorChangePoints() {Width=30,Height=35});
            colorchange.Add(new ColorChangePoints() {Width=35,Height=10});
            colorchange.Add(new ColorChangePoints() {Width=40,Height=20});
            AreaSeries changecolor = AreaSeriesFill.Series[0] as AreaSeries;
            changecolor.IndependentValuePath = "Width";
            changecolor.DependentValuePath = "Height";
            changecolor.ItemsSource = colorchange;
        public class ColorChangePoints
            public double Width {get; set;}
            public double Height {get; set;}
Nothing special, but it's easier for me than hard coding it into the XAML

I've uploaded a copy of the project for you to play around with.

Thursday, May 10, 2012

Reversing a Silverlight Line Chart with XAML only

I figured out the reversal, however the chart needed to plot downward and not left to right.

After trying to plot using the example below, the lines did not plot right. They were jagged and the graph did not plot any of the points in order.

One of my coworkers made the observation that the Silverlight charts always run left to right - for some reason it even happened when I "flipped" the chart in the way I previously tried (described below). However - the actual PLOTTING had remained the same. 

So, by going into the control template, I was able to translate the actual plotting area for the line to actually flow downward.

Went ahead and posted the explanation here.


Wanted to reverse a Line Chart in Silverlight. All I could find were solutions using C#, and I am not the C-sharpest (I am more C-dull) so I decided to play around with the styles and options in the Linear Chart that is in the Silverlight 5 toolkit. (Have not tested it in Silverlight 4).

I looked at the code for the chart and couldn't figure out why it all had to be in C#, the elements themselves could use RenderTransform to change their orientation.

Started with the basic control, Layout Root. Added a Canvas for my new chart. I do include the entire list of xmlns definitions at the top. It helps me remember what to use, and kept getting frustrated with seeing a solution, but not what I needed to refer to so that it would WORK for me. I am still at the basic level when it comes to coding.

Make sure that you have the System.Windows.Controls.DataVisualization.Toolkit.dll in your References folder, or this won't work.

You can download the most current Silverlight Toolkit here.

Ok, from this point on - I am only showing the main code used in the actual line graph. That top part is LONG. Started with the basic line chart, and I did separate out the Axis Titles, this way if they need to be rotated I just rotate the TextBlock without affecting the entire axis.

Then added the LineSeries (these are notes for me, and I know I would forget this part too - so, have to make sure that I keep track of this chart item as well)

I didn't want to create the points for this entry in the code behind, so I used the answer to this post and just defined the points in the XAML for now. 

I also went ahead and finished defining the minimum and maximum for both of the axes - for the X-Axis, I gave an Interval of 2 so more lines would show.

Below is the finished code and a screenshot of the chart itself - right now it is the basic, default chart without any styling.

Since the code has become rather long (for me to keep copying and making it readable) I will just show the individual elements of the chart as I change them.

First, I reversed the actual Axis Labels on the Y axis - this has not changed the line as the preview shows. I added the RenderTransform Code to the elements - this is why I separated the Title of the Axis using <chartingToolkit:LinearAxis.Title> and a TextBlock. Since it automatically rotates with the axis, I can rotate it back to where it should be.

For the Labels, they will be upside down once you reverse the ScaleY of the axis, but by using the <chartingToolkit:LinearAxis.AxisLabelStyle> I can transform them back to the orientation they need to be.

Now, I just need to reverse the line on this chart - and it will display like I want it too - the zero at the top left hand corner and going DOWN as values change.

Reversing the LineSeries is SUPER easy - all I did was add
<CompositeTransform ScaleY="-1" />

Now the line is reversed with the Y axis - and I have the chart the way I wanted it - the Y axis reversed with 0 on the top.

And there it is - a reversed chart where I didn't fry my brain on C# (it did fry a bit on the XAML since I had to play around with it and came up with a lot of deformed charts).

I've uploaded the file for you to play with/use.