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.

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">
                            <Setter.Value>
                                <ControlTemplate TargetType="my:BootstrapButton">
                                    <Grid Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding Width}">
                                        <Grid.RenderTransform>
                                            <CompositeTransform/>
                                        </Grid.RenderTransform>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0"/>
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Normal"/>
                                                <VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <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"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="ButtonStates">
                                                <VisualState x:Name="Open">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                            <DoubleAnimation.EasingFunction>
                                                                <CubicEase EasingMode="EaseOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Close">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0:0:0.4" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                            <DoubleAnimation.EasingFunction>
                                                                <CubicEase EasingMode="EaseOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Ellipse>
                                            <Ellipse.Fill>
                                                <LinearGradientBrush EndPoint="0.691,0.972" StartPoint="0.307,0.037">
                                                    <GradientStop Color="#FFA2ADB8"/>
                                                    <GradientStop Color="White" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                        <Ellipse Margin="1">
                                            <Ellipse.Fill>
                                                <LinearGradientBrush EndPoint="0.631,1" MappingMode="RelativeToBoundingBox" StartPoint="0.29,0.045">
                                                    <GradientStop Color="#FFB8C3C8" Offset="1"/>
                                                    <GradientStop Color="#FFE7EBED" Offset="0.27"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                        <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">
                                            <Path.RenderTransform>
                                                <CompositeTransform TranslateY="-1"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                    <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>
                    <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">
                            <Setter.Value>
                                <ControlTemplate TargetType="my:FloatingWindowHost">
                                    <Grid x:Name="PART_Root" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="OverlayStates">
                                                <VisualState x:Name="VisibleOverlay">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <Visibility>Visible</Visibility>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="HiddenOverlay">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <Visibility>Collapsed</Visibility>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Grid x:Name="PART_ContentRoot">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Canvas x:Name="PART_HostCanvas"/>
                                            <Grid x:Name="PART_IconBarContainer" VerticalAlignment="Bottom">
                                                <my:IconBar x:Name="PART_IconBar"/>
                                            </Grid>
                                            <Border Visibility="Collapsed" x:Name="PART_BottomBar" Grid.Row="1" Style="{StaticResource BottomBarStyle}">
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <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"/>
                                                    </Border>
                                                </Grid>
                                            </Border>
                                        </Grid>
                                        <Grid x:Name="PART_Overlay" Background="{TemplateBinding OverlayBrush}" Opacity="0" />
                                        <Canvas x:Name="PART_ModalCanvas"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

"Dynamic" LinearGradientBrush using a public class

(Still working on this - more info later. Below is the code to create the effect)

1. Create a new class object in Blend (or Visual Studio). (Such as ElementItems.cs)

2. In the class, create a public class (such as public class LinearBrushItems... full example below)

namespace ThisApplication
{
   public class ElementItems
    {
       public ElementItems()
        {
         }

       public class LinearBrushItems
      {
           // the line below extracts the EndPoint for the brush. This is why it is defined as a Point
            public Point EndPoint {get; set;}
           // the line below extracts the StartPoint for the brush. This is why it is defined as a Point
           public Point StartPoint {get; set;}
           // sets the GradientStopCollection for the brush
           // the GradientStopCollection defines the GradientStops for the brush, and the colors
           public GradientStopCollection GradientStopCollection {get; set;}
      }
}

The GradientStopCollection is defined in a Resource Dictionary. It is implied in a LinearGradientBrush definition - if the entire framework of the LinearGradientBrush was displayed it would be:

<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
   <GradientStopCollection >
        <GradientStop Color="Blue" Offset="0.296"/>
        <GradientStop Color="Yellow" Offset="0.985"/>
        <GradientStop Color="Green" Offset="0.041"/>
        <GradientStop Color="Red" Offset="0.696"/>
        <GradientStop Color="White" Offset="0.307"/>
        <GradientStop Color="Black" Offset="0.744"/>
    </GradientStopCollection>
</LinearGradientBrush>

Giving the GradientStopCollection a key, and defining in a Resource Dictionary, can be reused without creating a new brush. 

<GradientStopCollection x:Key="RainbowGradientOne">
        <GradientStop Color="Blue" Offset="0.296"/>
        <GradientStop Color="Yellow" Offset="0.985"/>
        <GradientStop Color="Green" Offset="0.041"/>
        <GradientStop Color="Red" Offset="0.696"/>
        <GradientStop Color="White" Offset="0.307"/>
        <GradientStop Color="Black" Offset="0.744"/>
    </GradientStopCollection>

:NOTE:

If there are any LinearGradientBrushes that are an exact duplicate of the GradientStops defined in the GradientStopCollection you will see the error "Value does not fall within the expected range". For example: if the LinearGradientBrush and the GradientStopCollection in this example were defined in the same application (even if in different Resource Dictionaries) - the application will throw this error.

When I got that error, I looked all over and read several possible fixes. When Blend gave me that error - after hitting ok when it asked to see the results panel, that is the error it gave.

It did give another error before I hit the ok on the dialog window. By increasing the results window before building, I was able to see the initial error - which gave the explanation that there was a duplicate definition.

To use the class in a UserControl (haven't tried in a page yet)

<UserControl
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:local = "clr-namespace:This Application"
 x:Class="ThisApplication.GradientTest"/>

<UserControl.Resources>
<!-- The local definition for the LinearGradientBrush Elements HAS to have a key associated with it -->
<local:LinearBrushItems x:Key="BasicRainbowGradient"
                                          EndPoint="0,0"
                                          StartPoint="1,1"
                                          GradientStopCollection="{StaticResource RainbowGradientOne}" />
</UserControl.Resources>

<Border x:Name="ThisBorder">
   <Border.Background>
<LinearGradientBrush
               EndPoint="{Binding Source={StaticResource BasicRainbowGradient}, Path=EndPoint}"
               StartPoint="{Binding Source={StaticResource BasicRainbowGradient}, Path=StartPoint}"
              GradientStops="{Binding Source={StaticResource BasicRainbowGradient}, Path=GradientStopCollection}" />
            </Border.Background>
</Border>
</UserControl>

This will give the LinearGradientBrush the elements defined in the "BasicRainbowGradient" defined in the UserControl.Resources.