Tuesday 1 November 2011

Silverlight Elements

AutoCompleteBox :-
 
It is a Textbox that provides possible matches when user types.

Here is an example that uses the set of twelve calendar months:

//MainPage.xaml
<input:AutoCompleteBox Margin="170,124,191,0" VerticalAlignment="Top" Name="txtMonth" Width="250" />

//MainPage.xaml.cs
string[] monthList = {"January", "February", "March", "April","May", "June", "July", "August", "September","October", "November", "December"};
txtMonth.ItemsSource = monthList;

Lets run the application and type 'j' , you will see this :)



TextBlock :-

In Silverlight we have Label but we are using mostly TextBlock for showing blocks of formatted text.

//MainPage.xaml
 <TextBlock>This is text</TextBlock>
or, <TextBlock Text="This is text"></TextBlock>



HyperLinkButton :-

If we use text in HyperLinkButton, it appears Blue by default, but its not underlined [use Text Decoration property if you want that effect]. On 'Mouse Over', mouse cursor changes to pointing hand [you can override this property by setting cursor property].


RadioButton :-
 
If we have all  Radio Buttons in one StackPanel, they are in one Group. There is 'GroupName' property for Radio Buttons for grouping.

Here is an example :)

//MainPage.xaml
<StackPanel>
            <RadioButton Content="Group 1"></RadioButton>
            <RadioButton Content="Group 2"></RadioButton>
            <RadioButton Content="Group 3"></RadioButton>
</StackPanel>


ToolTip :-

It is a content control, you can populate anything inside ToolTip. You can use ToolTipServices to configure a tooltip for an existing element.

Note : We can assign name to tooltip and can handle it programmatically.

//MainPage.xaml
<Button Content="I have a fancy tooltip" Width="200" Height="30">
            <ToolTipService.ToolTip>
                <StackPanel>
                    <TextBlock Margin="3" Text="Image and text"></TextBlock>
                    <Image Source="HappyFace.jpg"></Image>
                    <TextBlock Margin="3" Text="Image and text"></TextBlock>
                </StackPanel>
            </ToolTipService.ToolTip>
        </Button>



ListBox :-

You can use ListBoxItem inside ListBox for adding items.

//MainPage.xaml
<ListBox>
            <ListBoxItem>
                <Image Source="Happyface.jpg"></Image>
            </ListBoxItem>
            <ListBoxItem>
                <Image Source="SadFace.jpg"></Image>
            </ListBoxItem>
</ListBox>

Here is an example that uses nested StackPanel to combine text and image content:

<ListBox HorizontalAlignment="Center" Width="250" Height="100">
            <StackPanel Orientation="Horizontal">
                <Image Source="Happyface.jpg" Width="30" Height="30"></Image>
                <TextBlock VerticalAlignment="Center" Text="A happy face"></TextBlock>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image Source="SadFace.jpg" Width="30" Height="30"></Image>
                <TextBlock VerticalAlignment="Center" Text="A sad face"></TextBlock>
            </StackPanel>
</ListBox>












No comments:

Post a Comment