Silverlight Multi-state toggle button - silverlight

Question

Is there such a thing as a multi-state togglebutton in silverlight? I've tried retemplating radio buttons in a group, but I'd like to make a storyboard that works across the toggle states and because radio buttons are separate objects I'm stuck(I'm trying to make it look like the iphone toggle button, except multi-state)

Answer 1

The standard Silverlight CheckBox as an IsThreeState property. The default visual for the third state is "-", so you might have to customise the visuals.
A CheckBox is a specialisation of a ToggleButton.

Answer 2

You probably know of OOTB checkbox control:
http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/#/?sref=System.Windows.Controls.CheckBoxEx
That was probably useful, but for one of my projects, it had to be similar functionality but using an input box instead so I used custom UserControl approach. I'd highly recommend it.
In the constructor of usercontrol, after InitializeComponent(); you can specify the values that affect the UI. Time permitting I'll annotate some xaml+cs.
Here's some code:
XAML:
<UserControl x:Class="SilverlightApplication1.MainPage"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Style x:Key="TernaryTB" TargetType="TextBox">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Width" Value="64"/>
<Setter Property="Height" Value="39"/>
<Setter Property="FontWeight" Value="ExtraBold"/>
<Setter Property="FontFamily" Value="Portable User Interface"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="TextAlignment" Value="Center" />
</Style>
</Grid.Resources>
<TextBox x:Name="BackgroundTextBox" IsEnabled="True" BorderBrush="White" Foreground="{x:Null}" Visibility="Visible" Style="{StaticResource TernaryTB}"/>
<TextBox x:Name="TernaryTextBox" Style="{StaticResource TernaryTB}" GotFocus="TernaryTextBox_GotFocus"/>
</Grid>
</UserControl>
CS:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
private int current;
public int Current
{
get
{
return current;
}
set
{
current = value;
}
}
public struct DataStructure
{
private string label;
private Color color;
private Color forecolor;
public DataStructure(string label, Color c, Color c2)
{
this.label = label;
this.color = c;
this.forecolor = c2;
}
public string Label
{
get { return label; }
set { label = value; }
}
public Color Color
{
get { return color; }
set { color = value; }
}
public Color Forecolor
{
get { return forecolor; }
set { forecolor = value; }
}
}
IList<DataStructure> DataStructureArray;
public MainPage()
{
InitializeComponent();
current = 0;
int i = 0;
DataStructureArray = new Collection<DataStructure>
(new[] {
new DataStructure ("A", Colors.Red,Colors.Green),
new DataStructure ("B", Colors.Green,Colors.Blue),
new DataStructure ("C", Colors.Blue,Colors.Red)
});
foreach (DataStructure listItem in DataStructureArray)
{
if (i == current)
{
TernaryTextBox.Text = listItem.Label;
TernaryTextBox.Background = new SolidColorBrush(listItem.Color);
break;
}
i++;
}
}
public MainPage(IList<DataStructure> NewDataStructureArray)
{
int i = 0;
DataStructureArray = new Collection<DataStructure>();
foreach (DataStructure ds in NewDataStructureArray)
{
DataStructureArray.Add(new DataStructure(ds.Label, ds.Color, ds.Forecolor));
i++;
}
}
private void TernaryTextBox_GotFocus(object sender, RoutedEventArgs e)
{
int i = 0;
current = (current + 1) % 3;
foreach (DataStructure listItem in DataStructureArray)
{
if (i == current)
{
TernaryTextBox.Text = listItem.Label;
TernaryTextBox.Background = new SolidColorBrush(listItem.Color);
TernaryTextBox.Foreground = new SolidColorBrush(listItem.Forecolor);
BackgroundTextBox.Focus();
break;
}
i++;
}
BackgroundTextBox.Focus();
}
}
}
To test, simply add a brand spanking usercontrol to your project, copy paste my code; to test my code in isolation, open App.xaml.cs and simply replace:
this.RootVisual = new MainPage();
with:
this.RootVisual = new <Whatevernameyouchosefortheusercontrol>();
to see it in action