Changing Properties with the Storyboard (WPF)

Used with EventTriggers

<UserControl.Triggers>

     <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="CheckboxName">
          <BeginStoryboard x:Name="OnChecked_BeginStoryboard" Storyboard="{StaticResource ShowList}"/>
     </EventTrigger>

     <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="CheckboxName">
          <BeginStoryboard x:Name="OnChecked_BeginStoryboard" Storyboard="{StaticResource HideList}"/>
     </EventTrigger>

</UserControl.Triggers>

ObjectAnimationUsingKeyFrames (with a DiscreteObjectKeyFrame)

Changing the ItemsSource:

<Storyboard x:key="ItemsSourceChange">
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyList"  Storyboard.TargetProperty="ItemsSource" Duration="0:0:0">
          <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource Data}}"/>
     </ObjectAnimationUsingKeyFrames>
</Storyboard>

Changing the Style:

<Storyboard x:key="ItemsSourceChange">
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyList"  Storyboard.TargetProperty="Style" Duration="0:0:0">
          <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource ListStyle}}"/>
     </ObjectAnimationUsingKeyFrames>
</Storyboard>

Changing the Visibility:

<Storyboard x:key="ShowList">
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyList"  Storyboard.TargetProperty="(UIElement.Visibility)" Duration="0:0:0">
          <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
     </ObjectAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:key="HideList">
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyList"  Storyboard.TargetProperty="(UIElement.Visibility)" Duration="0:0:0">
          <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
     </ObjectAnimationUsingKeyFrames>
</Storyboard>

BooleanAnimationUsingKeyFrames (with a DiscreteBooleanKeyFrame)

Changing the IsChecked on a checkbox:

<Storyboard x:key="ChangeIsChecked">
     <BooleanAnimationUsingKeyFrames Storyboard.TargetName="CheckBox2"  Storyboard.TargetProperty="IsChecked" Duration="0:0:0">
          <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False"/>
     </BooleanAnimationUsingKeyFrames >
</Storyboard>

Dynamic Tabs

While working on part of a project - I wanted to use tabs, but they had to be generated dynamically. Even though we went with another way to do this I didn't want to lose the code I had found to make the tabs show up dynamically (now, just need to set aside time and figure out more on the TabItem Content)

(I'm going to make a separate post for the styling, since I was fortunate and found some of the templates I needed. I don't want to lose those either)

The actual XAML is only a Grid, with a reference to some data to use to fill out the tabs and a TabControl that contains the TabItems.

For this practice/test/will this ever work trial - I made an observable collection in the codebehind of the control itself.

Afterwards, I managed to come up with a foreach statement that would create and add the tabs to the main TabControl. It does assign a style to the tabs as well - I'm still figuring out the TabContent area. But baby steps :)

Now, time to document the style - and how I finally got into the tabs themselves.

Circular ListBox

I've been working with Silverlight, and I have been challenging myself to make my code cleaner for the controls and have the computer/system do more of the thinking. It's definitely a challenge to keep making the code smaller and cleaner for each of my controls.

Was playing with a few codes and putting the ideas together:

Today, merging a Simple Radial Panel and a more advanced Radial Panel with styling the way a list is presented.  I'm not listing the code for the RadialPanel, the links explain the process a lot better than I can.

Below is a screenshot of the final styled list.

This was a less intimidating way for me to look into styling with more code behind and try to cut down on the amount of XAML I have in any one control (data templates, etc).

The first step was to create the RadialPanel class (from this Blog Post).

Once defined, I was able to set a new ItemsPanelTemplate in a style that set the RadialPanel as the base for the ListBox - as well as set a DataTemplate for the list items so I could read the information straight from a List<>.

 <Style x:Key="RoundListOne" TargetType="ListBox">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <local:RadialPanel Width="350" Height="350" RenderTransformOrigin="0.5,0.5">
                        <local:RadialPanel.RenderTransform>
                            <CompositeTransform ScaleX="0.9" ScaleY="0.9"/>
                        </local:RadialPanel.RenderTransform>
                    </local:RadialPanel>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Tag="{Binding Path=colorValue}">
                        <Ellipse Name="colorSwatch" HorizontalAlignment="Center"
                                Width="30" Height="30" Fill="{Binding Path=colorValue}"/>
                        <TextBlock HorizontalAlignment="Center" Foreground="Gray"
                                Text="{Binding Path=colorName}"
                                VerticalAlignment="Center" Margin="5,0,0,0"/>
                    </StackPanel>
                   
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ListBoxItemContainerStyle" TargetType="ListBoxItem">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
    </Style>

Below is the XAML for the Color Wheel - it's just a ListBox

<Grid x:Name="LayoutRoot">
        <ListBox Name="CircularList"
            ItemContainerStyle="{StaticResource ListBoxItemContainerStyle}"
            Style="{StaticResource RoundListOne}"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Margin="10,19,164,18" UseLayoutRounding="False" Width="466" Height="443"
            SelectedValuePath="{Binding Path=colorValue}" BorderBrush="{x:Null}"
            SelectedValue="{Binding Path=colorValue}" SelectionChanged="changePreview" >
        </ListBox>
        <TextBox HorizontalAlignment="Left" Name="ColorPreview"
            TextWrapping="Wrap" Text="Color Formula Here"
            VerticalAlignment="Top" Margin="396,207,0,0"
            Width="136" Height="38" TextAlignment="Center"/>
    </Grid>


The code behind for the ListBox:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;


namespace PracticeControls
{
    public partial class CircularPicker : UserControl
    {
        public CircularPicker()
        {
            // Required to initialize variables
            InitializeComponent();
           
            this.Loaded += new RoutedEventHandler(populateList);
        }
       
        void populateList(object sender, RoutedEventArgs e)
        {
            PracticeData practiceData = new PracticeData();
           
            CircularList.DataContext = practiceData;
            CircularList.ItemsSource = practiceData._colorChoices;
            CircularList.SelectedValuePath = "colorValue";
        }

        private void changePreview(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            var colorchoice = CircularList.SelectedItem;
            var colorname = CircularList.SelectedValue;
            ColorPreview.Text = colorname.ToString();
           
            string backgroundColor = colorname.ToString();
            var backgroundValue = backgroundColor.Replace("#",string.Empty);
           
            byte a = (byte)(Convert.ToUInt32(backgroundValue.Substring(0,2),16));
            byte r = (byte)(Convert.ToUInt32(backgroundValue.Substring(2,2),16));
            byte g = (byte)(Convert.ToUInt32(backgroundValue.Substring(4,2),16));
            byte b = (byte)(Convert.ToUInt32(backgroundValue.Substring(6,2),16));
           
            SolidColorBrush previewBrush = new SolidColorBrush(Color.FromArgb(a,r,g,b));
            ColorPreview.Background = previewBrush;
        }
    }
}

The data is a very basic List< >:
 
public class ColorValues
        {
            public string colorValue {get; set;}
            public string colorName {get; set;}
        }
       
        private readonly List<ColorValues> _colorValues = new List<ColorValues>
        {
            new ColorValues {colorValue="#FFFF0000",colorName="Red"},
            new ColorValues {colorValue="#FFFF3300",colorName="Vermillion"},
            new ColorValues {colorValue="#FFFF6600",colorName="Amber"},
            new ColorValues {colorValue="#FFFFCC00",colorName="Gold"},
            new ColorValues {colorValue="#FFFFFF00",colorName="Yellow"},
            new ColorValues {colorValue="#FFCCFF00",colorName="Apple"},
            new ColorValues {colorValue="#FF66FF00",colorName="Chartreuse"},
            new ColorValues {colorValue="#FF33FF00",colorName="Lime"},
            new ColorValues {colorValue="#FF00FF00",colorName="Green"},
            new ColorValues {colorValue="#FF00FF33",colorName="Mint"},
            new ColorValues {colorValue="#FF00FF66",colorName="Jade"},
            new ColorValues {colorValue="#FF00FFCC",colorName="Turquoise"},
            new ColorValues {colorValue="#FF00FFFF",colorName="Cyan"},
            new ColorValues {colorValue="#FF00CCFF",colorName="Azure"},
            new ColorValues {colorValue="#FF0066FF",colorName="Sapphire"},
            new ColorValues {colorValue="#FF0033FF",colorName="Cobalt"},
            new ColorValues {colorValue="#FF0000FF",colorName="Blue"},
            new ColorValues {colorValue="#FF6600FF",colorName="Violet"},
            new ColorValues {colorValue="#FF9900FF",colorName="Purple"},
            new ColorValues {colorValue="#FFCC00FF",colorName="Orchid"},
            new ColorValues {colorValue="#FFFF00FF",colorName="Magenta"},
            new ColorValues {colorValue="#FFFF00CC",colorName="Fuchsia"},
            new ColorValues {colorValue="#FFFF0066",colorName="Carmine"},
            new ColorValues {colorValue="#FFFF0033",colorName="Scarlet"},
        };
       
        public List<ColorValues> _colorChoices
        {
            get {return _colorValues;}
        }
       
        private ColorValues _colorOptions;
       
        public ColorValues ColorOptions
        {
            get {return _colorOptions;}
            set
            {
                _colorOptions = value;
                PropertyChanged(this, new PropertyChangedEventArgs("ColorValues"));
            }
           
        }

You can see the working example here. Going to be playing with this idea some more, not sure with what or how but so far it's been fun customizing the basic ListBox this way.

Scaling and Orienting mobile website

Was having a few issues with a website (current project) scaling correctly when the user switched the orientation on their phone/tablet from portrait to landscape (and vice versa).

Turns out, that once the site was loaded the browser kept the size of the displayed page to that size even after the device was rotated. The culprit was my meta tag! (for shame!)

By reducing what I had in there - I ended up getting the result I wanted and using even less code than before!

<meta name="viewport" content="initial-scale=1.0"> 

Now, it resizes correctly when the user changes the orientation.

Also added another one to make sure that IE uses the highest possible version it is capable of, we had users not see the data because their browsers kept defaulting to compatibility mode. I have no idea why either.

But the meta tag below fixed that issue for us.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
 

Another mysterious windows error... they are good at that.

The Error:

System.Windows.Navigation.PageResourceContentLoader.EndLoad (IAsyncResult asyncResult) at
System.Windows.Navigation.NavigationService.ContentLoader_BeginLoad_Callback (IAsyncResult result) at
System.Windows.Navigation.PageResourceContentLoader.BeginLoad_OnUIThread(AsyncCallback userCallback, PageResourceContentLoaderAsyncResult result) at
System.Windows.Navigation.PageResourceContentLoader <>c DisplayClass4.<BeginLoad> b_0(Object args)

What did I find that caused this? Apparently it has to do with defined styles and other resources that are used to call out brushes, templates and any styles. It seems the key phrase is "PageResourceContentLoader" in this error.

one control based off of a defined control ViewModel had a resource still calling for a UserControl

<cntrl:MyCustomizedControl 
             xmlns:cntrl=application.controlsHere
            .....>
<UserControl.Resources>
<!-- resource definitions -->
</UserControl.Resources>

One other time, the reason was that one of the controls on the page had a missing resource definition. The static resource defining a brush had been moved and it could not find it. Once I was able to get that style back, the error was gone (basically, when you get the message or the underline in code saying the resource cannot be found)

The unseeable Telerik gauge

FINALLY figured out how I can see Telerik radial gauges in Blend, after they have been wired up with the view models, bindings, program architect magic. 

I forgot where I read the small snipped of pure gauge genius - but it suggested removing or moving some Telerik dll's out of your local Program folder and then make sure to relink to the solution's shared dll files. 

After a year of frustration - I just looked at the folder and put it on the desktop.

Opened Blend... I SAW MY GAUGES! 

Doesn't take much to make for a happy day, now - I have a scrollviewer that refuses to behave.

XamlParse Exception for that darn FrameworkElement MeasureOverride

I just wrangled with that fun and oh so detailed error of the XamlParseException that tells you something is wrong with your FrameworkElement MeasureOverride.

After hitting my head on my desk, cursing in my mind (cubicles aren't very private) and wanting to chuck my computer through the window, I figured it out.

This probably won't work for everyone, but it could be a good starting point. In my codebehind I had a SizeChanged declared.

public myControl()
{
    InitializeComponent();
    this.SizeChanged += new SizeChangedEventHandler(myControl_SizeChanger);
}

Once I commented out (and then got rid of) the size changed event, the error went away.

to get the autosizing I wanted on this control, in the main "header" (that's what I call the code at the top that declares all of the xmlns values), I set a DESIGN height and width instead of simply stating Height and Width :

Example:

<UserControl x:Class="application.myClass"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     mc:Ignorable="d"  d:DesignHeight="100" d:DesignWidth="100">

.... rest of code here
</UserControl>