SILVERLIGHT CONTROLS

The examples of usage of silverlight tools:

BORDER:

<Border BorderThickness="1" BorderBrush="Black">

<TextBlock Text="Border Thickness = 1">
</Border>

<Border BorderThickness="10" BorderBrush="Black">

<TextBlock Text="Border Thickness = 10">
</Border>

<Border BorderThickness="1" BorderBrush="Red">

<TextBlock Text="Red Border"/>
</Border>

BUTTON:

<Button Content="Default" />

<Button Content="Red" Background="Red" />

<Button Content="Disabled" IsEnabled="False" />

<Button>
<Image Source="mixlogo.jpg" />
</Button>

<Button>
<StackPanel>
<TextBlock Text="Text" />
<Image Source="mixlogo.jpg" />
</StackPanel>
</Button>

CALENDER:

// need to declare the Silverlight SDK Controls dll

xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

// using the Calendar

<c:Calendar />

<c:Calendar DisplayMode="Year" />

<c:Calendar SelectionMode="None" />

<c:Calendar SelectionMode="SingleDate" />

<c:Calendar SelectionMode="SingleRange" />

<c:Calendar SelectionMode="MultipleRange" />

CHECKBOX:

<CheckBox Content="Default" />

<CheckBox Content="Red" Background="Red" IsThreeState="True" />

<CheckBox Content="Disabled" IsEnabled="False" />

<CheckBox>
<Image Source="mixlogo.jpg" />
</CheckBox>

COMBOBOX:

<ComboBox>
<TextBlock Text="One"/>
<TextBlock Text="Two"/>
<TextBlock Text="Three"/>
<!--Other Element works as well-->
<Button Content="Button"/>
</ComboBox>

<ComboBox SelectedIndex="2">
<TextBlock Text="One"/>
<TextBlock Text="Two"/>
<TextBlock Text="Three"/>
</ComboBox>

CONTENT CONTROL:

<ContentControl Content="Default Content Control" />

<ContentControl Height="100">
<Image Source="mixlogo.jpg" />
</ContentControl>
DATA GRID:

// need to declare the System.Windows.Controls.Data dll

xmlns:Data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

// using the DataGrid

<Data:DataGrid Grid.Row="1" x:Name="dataGrid" Margin="5"
RowDetailsVisibilityMode="VisibleWhenSelected">
<Data:DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Background="LightBlue">
<StackPanel Orientation="Horizontal">
<TextBlock Text="I am a row detail!"
Style="{StaticResource TBNormal}"
FontSize="12"/>
<Image Source="mixLogo.jpg" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Here is some data: "
Style="{StaticResource TBNormal}" FontSize="12" />
<TextBlock Text="{Binding FirstName}"
Style="{StaticResource TBNormal}" FontSize="12" />
<TextBlock Text="{Binding LastName}"
Style="{StaticResource TBNormal}" FontSize="12" />
</StackPanel>
</StackPanel>
</DataTemplate>
</Data:DataGrid.RowDetailsTemplate>
</Data:DataGrid>

DATEPICKER:

// need to declare the Silverlight SDK Controls dll

xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

// using the DatePicker

<c:DatePicker />

<c:DatePicker SelectedDateFormat="Long" />

HYPERLINKBUTTTON:
<HyperlinkButton Content="HyperlinkButton"
NavigateUri="http://visitmix.com/"/>

<HyperlinkButton Content="Red HyperlinkButton"

Background="Red"
NavigateUri="http://blogs.msdn.com/kathykam"/>

<HyperlinkButton NavigateUri="http://silverlight.net/>"
<Image Source="logo.jpg" Height="100" />
</HyperlinkButton>

IMAGE:

<Image Source="mixlogo.jpg" Height="75"/>

<Image Source="logo.jpg" Height="175" />

LISTBOX:

<ListBox Height="100">
<ListBoxItem Content="One"/>
<ListBoxItem Content="Two"/>
<ListBoxItem Content="Three"/>
<!--Other Element works as well-->
<Button Content="Button"/>
</ListBox>

MEDIAELEMENT:

<StackPanel>
<MediaElement x:Name="mediaElement" Source="giraff.wmv" />
<Slider x:Name="timeline" Maximum="1" ValueChanged="timeLine_ValueChanged"/>
<StackPanel>
<Button Content="Stop" Click="Stop_Click" />
<ToggleButton Content="Play" Click="PlayPause_Click" />
<ToggleButton Content="Sound Off" Click="Mute_Click" />
</StackPanel>
</StackPanel>

MESSAGEBOX:

//There are no valid XAML. Instead you use a MessageBox by calling//it in your code
behind:MessageBox.Show(tbContent.Text);

MessageBox.Show(tbContent.Text, tbTitle.Text, MessageBoxButton.OK);

MessageBox.Show(tbContent.Text, tbTitle.Text, MessageBoxButton.OKCancel);

PASSWORDBOX:

<PasswordBox />

<PasswordBox Password="password"/>

<PasswordBox Password="password" Foreground="Red"/>

<PasswordBox Password="password" Background="Red"/>

<PasswordBox Password="password" PasswordChar="?"/>

<PasswordBox FontFamily="Comic Sans MS" />

<PasswordBox FontSize="24" />

PROGRESSBAR:

<ProgressBar />

<ProgressBar Value="50"/>

<ProgressBar Value="50" Maximum="50"/>

<ProgressBar Value="50" Foreground="Red"/>

RADIOBUTTON:

<RadioButton Content="Default" />

<RadioButton Content="Red" Background="Red" IsThreeState="True" />

<RadioButton Content="Disabled" IsEnabled="False" />

<RadioButton>
<Image Source="mixlogo.jpg" />
</RadioButton>

REPEATBUTTON:

<RepeatButton Content="Default" />

<RepeatButton Content="Red Interval=1" Background="Red"
Interval="1" />

<RepeatButton Content="Disabled" IsEnabled="False" />

SCROLLVIEWER:

<ScrollViewer Grid.Row="0" Grid.Column="0" Margin="5">

<Image Source="Image.jpg" Width="600"/>
</ScrollViewer>

<ScrollViewer Grid.Row="0" Grid.Column="1" Margin="5"

HorizontalScrollBarVisibility="Visible">
<Image Source="Image.jpg" Width="600"/>
</ScrollViewer>

<ScrollViewer Grid.Row="1" Grid.Column="0" Margin="5">

<TextBox>
<TextBox.Text>
Lots of text here...
</TextBox.Text>
</TextBox>
</ScrollViewer>

<ScrollViewer Grid.Row="1" Grid.Column="1" Margin="5"

HorizontalScrollBarVisibility="Visible">
<TextBox>
<TextBox.Text>
Lots of text here...
</TextBox.Text>
</TextBox>
</ScrollViewer>

SLIDER:

<Slider />

<Slider IsDirectionReversed="True" />

<Slider IsEnabled="False" />

<Slider Orientation="Vertical" />

STACKPANEL:
<Border BorderThickness="1" BorderBrush="1" Padding="10">
<StackPanel>
<TextBlock Text="TextBlock" />
<Image Source="mixlogo.jpg" />
<TextBox Text="TextBox" />
</StackPanel>
</Border>

<Border BorderThickness="1" BorderBrush="1" Padding="10">

<StackPanel Orientation="Horizontal">
<TextBlock Text="TextBlock" />
<Image Source="mixlogo.jpg" />
<TextBox Text="TextBox" />
</StackPanel>
</Border>

TABCONTROL:

// need to declare the Silverlight SDK Controls dll

xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

// using the TabControl

<c:TabControl>
<c:TabItem Header="One">
<TextBlock Text="Some content" />
</c:TabItem>
<c:TabItem>
<c:TabItem.Header>
<TextBlock Text="Two"
ToolTipService.ToolTip="This tab has nothing"/>
</c:TabItem.Header>
</c:TabItem>
<c:TabItem>
<c:TabItem.Header>
<Image Source="mixlogo.jpg" Height="20"/>
</c:TabItem.Header>
<TextBlock Text="Tab #3's Content" FontSize="20"/>
</c:TabItem>
<c:TabItem>
<c:TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Four"/>
<Image Source="mixlogo.jpg" Height="20" />
</StackPanel>
</c:TabItem.Header>
<Image Source="logo.jpg"/>
 </c:TabItem>
</c:TabControl>

<c:TabControl TabStripPlacement="Right" >

<!-- content -->
</c:TabControl>

TEXTBLOCK:

<TextBlock Text="TextBlock"/>

<TextBlock Text="TextBlock w/ Red Foreground" Foreground="Red" />

<TextBlock Text="&quot;Trebuchet MS&quot; Font"

FontFamily="Trebuchet MS" />

<TextBlock Text="FontSize=&quot;20&quot;" FontSize="20"/>

TEXTBOX:

<TextBox Text="TextBlock"/>

<TextBox Text="Read Only" IsReadOnly="True" />

<TextBox Text="Trebuchet MS Font" FontFamily="Trebuchet MS" />

<TextBox Text="Red Background" Background="Red" />

<TextBox Text="Red Foreground" Foreground="Red" />

<TextBox Text="Multiline TextBox&#xD;Multiline TextBox&#xD;..."

AcceptsReturn="True" Foreground="Red" />

<TextBox Text="Scrollbar TextBox&#xD;Scrollbar TextBox&#xD;..."

AcceptsReturn="True" VerticalScrollBarVisibility="Auto"
IsReadOnly="True" Foreground="Gray" />

TOGGLEBUTTON:

<ToggleButton Content="Default" />

<ToggleButton Content="Red" Background="Red" IsThreeStates="True" />

<ToggleButton Content="Disabled" IsEnabled="False" />

<ToggleButton>
<Image Source="mixlogo.jpg" />
</ToggleButton>

TOOLTIP:

<TextBox Text="TextBlock"
ToolTipService.ToolTip="ToolTip of TextBlock"/>

<TextBox Text="TextBox" >

<ToolTipService.ToolTip>
<Image Source="mixlogo.jpg" />
</ToolTipService.ToolTip>
</TextBox>

<ContentControl Content="ContentControl"
ToolTipService.ToolTip="I'm ToolTip of ContentControl"/>

<Button Content="Button"
ToolTipService.ToolTip="I'm ToolTip of Button"/>

<RadioButton Content="RadioButton"
ToolTipService.ToolTip="I'm ToolTip of RadioButton"/>

<CheckBox Content="CheckBox">
<ToolTipService.ToolTip>
<Image Source="mixlogo.jpg" />
</ToolTipService.ToolTip>
</CheckBox>

AUTOCOMPLETEBOX:

<sdk:AutoCompleteBox .../>

In code behind:

[TemplateVisualStateAttribute(Name = "InvalidUnfocused", GroupName =

"ValidationStates")]
[TemplatePartAttribute(Name = "Text", Type = typeof(TextBox))]
[TemplateVisualStateAttribute(Name = "PopupOpened", GroupName = "PopupStates")]
[TemplateVisualStateAttribute(Name = "PopupClosed", GroupName = "PopupStates")]
[TemplateVisualStateAttribute(Name = "Pressed", GroupName = "CommonStates")]
[ContentPropertyAttribute("ItemsSource")]
[TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")]
[TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")]
 [TemplatePartAttribute(Name = "SelectionAdapter", Type = typeof(ISelectionAdapter))]
[TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Valid", GroupName = "ValidationStates")]
[TemplatePartAttribute(Name = "Popup", Type = typeof(Popup))]
[TemplateVisualStateAttribute(Name = "InvalidFocused", GroupName =
"ValidationStates")]
[StyleTypedPropertyAttribute(Property = "ItemContainerStyle", StyleTargetType =
typeof(ListBox))]
[TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]
[TemplatePartAttribute(Name = "Selector", Type = typeof(Selector))]
[StyleTypedPropertyAttribute(Property = "TextBoxStyle", StyleTargetType =
typeof(TextBox))]
[TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")]
public class AutoCompleteBox : Control

CHILDWINDOW:

<sdk:ChildWindow ...>
singleObject
</sdk:ChildWindow>
-or-
<sdk:ChildWindow ...>stringContent</sdk:ChildWindow>

LABEL:

<sdk:Label .../>
-or-
<sdk:Label>
singleObject
</sdk:Label>
-or-
<sdk:Label>stringContent</sdk:Label>

<sdk:Label Content="Date of Birth" IsRequired="True" Margin="5" />

TREEVIEW:

<sdk:TreeView .../>

<StackPanel x:Name="LayoutRoot" Background="White">

<Border BorderBrush="Black" BorderThickness="2">
<StackPanel>
<TextBlock Text="TreeView Example" />
<sdk:TreeView>
<sdk:TreeViewItem Header="TreeViewItem containing other items.">
<sdk:TreeViewItem.Items>
<sdk:TreeViewItem>
 <sdk:TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="15" Width="15" Source="Resources/leave-site.jpg" />
<TextBlock Text="Item 1" Margin="2"/>
</StackPanel>
</sdk:TreeViewItem.Header>
</sdk:TreeViewItem>
<sdk:TreeViewItem>
<sdk:TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="15" Width="15" Source="Resources/switch.jpg" />
<TextBlock Text="Item 2" Margin="2"/>
</StackPanel>
</sdk:TreeViewItem.Header>
</sdk:TreeViewItem>
</sdk:TreeViewItem.Items>
</sdk:TreeViewItem>
</sdk:TreeView>
</StackPanel>
</Border>
</StackPanel>

TO DRAG THE CONTROLS:

<StackPanel Orientation="Horizontal">
        <toolkit:PanelDragDropTarget >
            <StackPanel Width="400" Height="500" Background="Green" AllowDrop="True">
                <Button Content="This is test"></Button>
                <Button Content="This is test2"></Button>
                <Rectangle Fill="Red" Width="100" Height="30"></Rectangle>
            </StackPanel>
        </toolkit:PanelDragDropTarget>

        <toolkit:PanelDragDropTarget AllowDrop="True" >

            <StackPanel Width="400" Height="500" Background="Yellow">
                <ListBox ItemsSource="abcdef"></ListBox>
            </StackPanel>
        </toolkit:PanelDragDropTarget>

    </StackPanel>