How to use a TextBlock in WPF and windows phone application Part-2?

Before Continue to read our first article How to use a TextBlock in WPF and windows phone application Part-1?

http://tech.queryhome.com/94985/how-use-textblock-xaml-wpf-and-windows-phone-application-part

The FontSource property allows loading custom fonts dynamically. The following code snippet sets theFontSource property.

Uri fontUri = new Uri("SomeFont.ttf", UriKind.Relative);

StreamResourceInfo MySRI = Application.GetResourceStream(fontUri);

TextBlock1.FontSource = new FontSource(MySRI.Stream);

Wrapping, Alignment and Padding

The TextWrapping property sets the wrap of no wrap text. The following code snippet sets the wrapping text option.

TextWrapping="Wrap"

The TextAlignment property sets the text alignment in a TextBlock that is of type TextAlignmentenumeration. A text can be aligned left, center, or right.

TextAlignment="Right"

The Padding property sets the space between a boundary and the text that can be applied to all sides or a selected side of the boundary. The padding spacing is based on left, right, top and bottom. If you specify only a single value, the padding will be applied to all four sides and if you specify two values, it will be applied to LeftTop and BottomRight sides.

Listing 5 shows all these properties in a complete sample.

<TextBlock Name="TextBlock1" Height="30" Width="200"

Text="Hello! I am a TextBlock." Foreground="Red"

Margin="10,10,0,0" VerticalAlignment="Top"

HorizontalAlignment="Left"

FontSize="14" FontFamily="Verdana" FontWeight="Bold"

TextWrapping="Wrap" TextAlignment="Center" Padding="2">

</TextBlock>

Listing 5

Inlines

The Inlines property represents the collection of inline text within a TextBlock control. A Run object represents an inline text and can be treated as its own text control and have its foreground and font related properties.

Listing 6 sets the Inlines property of the TextBlock and sets various fonts and foreground colors.

<TextBlock.Inlines>

<Run.Foreground>

</LinearGradientBrush>

</Run.Foreground>

</Run>

</TextBlock.Inlines>

Listing 6

The new output looks as in Figure 5.

Figure 5

TextDecorations

The TextDecorations property represents the text decorations that are applied to the content of aTextBlock. WPF supports only underlined text decoration.

Listing 7 sets the TextDecorations to underline.

<TextBlock Name="TextBlock1"

Margin="10,10,0,0" VerticalAlignment="Top"

HorizontalAlignment="Left"

FontSize="12" FontFamily="Verdana"

TextWrapping="Wrap" TextAlignment="Left" Padding="2"

TextDecorations="Underline">

Listing 7

The new output looks as in Figure 6.

Figure 6

Summary

In this article, I discussed how to create and format a TextBlock control in WPF and C#. Then we saw how to create a TextBlock control dynamically. Then we saw how to set various properties of a TextBlock such as fonts, Inlines and text decorations.

How to use a TextBlock,XAML in WPF and windows phone application Part-1?

The XAML TextBlock element represents a text block. The TextBlock control provides a lightweight control for displaying small amounts of flow content. This article shows how to use a TextBlock control in WPF.

Creating a TextBlock

The TextBlock element represents a WPF TextBlock control in XAML.

<TextBlock/>

The Width and Height attributes of the TextBlock element represent the width and the height of aTextBlock. The Text property of the TextBlock element represents the content of a TextBlock. The Name attribute represents the name of the control that is a unique identifier of a control. The Foreground property sets the foreground color of contents. This control does not have a Background property.

The code snippet in Listing 1 creates a TextBlock control and sets the name, height, width, foreground and content of a TextBlock control. Unlike a TextBox control, the TextBlock does not have a default border around it.

<TextBlock Name="TextBlock1" Height="30" Width="200"

Text="Hello! I am a TextBlock." Foreground="Red">

</TextBlock>

Listing 1

The output looks as in Figure 1.

output
Figure 1

As you can see from Figure 1, by default the TextBlock is placed in the center of the page. We can place aTextBlock control where we want using the Margin, VerticalAlignment and HorizontalAlignment attributes that sets the margin, vertical alignment and horizontal alignment of a control.

The code snippet in Listing 2 sets the position of the TextBlock control in the left top corner of the page.

Listing 2

Creating a TextBlock Dynamically

The code listed in Listing 3 creates a TextBlock control programmatically. First, it creates a TextBlockobject and sets its width, height, contents and foreground and later the TextBlock is added to theLayoutRoot.

private void CreateATextBlock()
{
TextBlock txtBlock = new TextBlock();
txtBlock.Height = 50;
txtBlock.Width = 200;
txtBlock.Text = "Text Box content";
txtBlock.Foreground = new SolidColorBrush(Colors.Red);

LayoutRoot.Children.Add(txtBlock);
}

Listing 3

Setting Fonts of TextBlock Contents

The FontSize, FontFamily, FontWeight, FontStyle and FontStretch properties are used to set the font size, family, weight, style and stretch to the text of a TextBlock. The code snippet in Listing 4 sets the font properties of a TextBlock.

FontSize="14" FontFamily="Verdana" FontWeight="Bold"

Listing 4

The new output looks as in Figure 4.

hello

How to use a TabControl in WPF and windows phone application Part-2?

Read our first Article How to use a TabControl in WPF and windows phone application Part-1?http://tech.queryhome.com/93377/how-to-use-tabcontrol-wpf-and-windows-phone-application-part#rHE29pyoFe3gKBoS.99

Listing 2
If I run the application, the Circle tab shows me a circle that looks as in Figure 3.

Figure 3
If I click on Rectangle and Polygon, the output looks as in Figure 4 and Figure 5 respectively.

Figure 4

Figure 5
Formatting Tab Items
Let's get a little creative. How about making our tab headers and tab control areas look nicer.

In a Tab Control, both a Tab Header and Tab Item are loosely coupled and we can treat them as any otherWPF control. That said, we can place any children controls on them, format them and do whatever we want. So if we want to place a DataGrid control in a TabItem header, we can do that.

Now let's format our Tab Item Header and Tab Item container area. We will format our Tab Item that looks as in Figure 6, where we will use multiple colors for the background and change the text of the Tab Item Header and we will also change the background of the Tab Item container area to a gradient background.

Figure 6
To do this, I placed a StackPanel on TabItem.Header and set its background to a LinearGradientBrush. Then, I placed an Ellipse and a TextBlock on the TabItem Header.

Then as the content of the TabItem, I placed a StackPanel and changed its background to aLinearGradientBrush. See Listing 3.

Listing 3

Note: If you would like to load images at the top of text of the header, simply remove Orientation="Horizontal" from the stack panel in the preceding code. The default orientation is vertical.

NOTE: Part-3 will update soon..

How to use ListBox in WPF and windows phone application Part 2?

Formatting and Styling

Formatting ListBox Items

The Foreground and Background attributes of ListBoxItem represents the background and foreground colors of the item. The following code snippet sets the background and foreground colors of aListBoxItem.

The FontFamily, FontSize and FontWeight are used to set a font of a ListBoxItem. The following code snippet sets the font to verdana, the size to 12 and bold of a ListBoxItem.

I set the following properties of ListBoxItems.

The new ListBox looks as in Figure 4.

Figure 4. Formatted ListBox

Displaying Images in a ListBox

We can put any controls inside a ListBoxItem such as an image and text. To display an image beside some text, I simply put an Image and TextBlock control within a StackPanel. The Image.Source property takes the name of the image you would like to display in the Image control and the TextBlock.Text property takes a string that you would like to display in the TextBlock.

The following code snippet adds an image and text to a ListBoxItem.

After changing my code for all 5 ListBoxItems, the ListBox looks as in Figure 5.

Figure 5. ListBoxItems with Image and text

ListBox with CheckBoxes

If you put a CheckBox control inside ListBoxItems, you generate a ListBox control with checkboxes in it. The CheckBox can host controls within it as well. For instance, we can put an image and text block as the content of a CheckBox.

The following code snippet adds a CheckBox with an image and text to a ListBoxItem.

I change the code of ListBoxItems and add the following CheckBoxes to the items. As you may see, I have set the name of the CheckBoxes using the Name property. If you need to access these CheckBoxes, you may access them in the code using their Name property.

Part 3 Will Update Soon

How to use a TabControl in WPF and windows phone application Part-1?

A Tab Control has tab items and each tab item represents a container that is used to host other controls. A typical example of a Tab control is the Visual Studio designer as shown in Figure 1. If you click on theWindow1.xaml tab item, you will see XAML code but if you click on Window1.xaml.cs, you will see C# code behind.

Figure 1

Create a Tab Control

The TabControl element in XAML represents a Tab Control.

<TabControl />

The code snippet in Listing 1 creates a Tab Control and sets it height, width, margin and alignment. The code also adds a TabItem.

<TabControl Height="238" HorizontalAlignment="Left" Margin="12,12,0,0"
Name="tabControl1" VerticalAlignment="Top" Width="445">
<TabItem Header="tabItem1" Name="tabItem1">
</TabItem>
</TabControl>

Listing 1

The output of Listing 1 looks as in Figure 2.

Figure 2

Adding Tab Items

A Tab Control is nothing without a Tab Item. The <TabItem \> element in XAML represents a Tab Item. The Header property of a TabItem represents the header text of the header. The following code creates aTabItem with the header text “Circle”.

</TabItem>

A tab item can host other XAML controls similar to a panel or grid control. For example, the following code adds a StackPanel to the tab item and on that StackPanel, it creates a circle with height and width 100.

Using the same preceding approach, I add three tab items to the tab control (Listing 2) called Circle, Rectangle and Polygon.

Listing 2

Part 2: http://tech.queryhome.com/94066/how-to-use-tabcontrol-wpf-and-windows-phone-application-part

How to use ListBox in WPF and windows phone application Part 6?

Data Binding with Controls

The last data binding type we will see is how to provide a data exchange between a ListBox and other controls using data binding in WPF.

We will create an application that looks as in Figure 12. In Figure 12, I have a ListBox with a list of colors, a TextBox and a Canvas. When we pick a color from the ListBox, the text of TextBox and color of Canvas changes dynamically to the color selected in the ListBox and this is possible to do all inXAML without writing a single line of code in the code behind file.

looks like Figure
Figure 12.

The XAML code of the page looks as in following.

     <StackPanel Orientation="Vertical">
<TextBlock Margin="10,10,10,10" FontWeight="Bold">
Pick a color from below list
</TextBlock>
<ListBox Name="mcListBox" Height="100" Width="100"
Margin="10,10,0,0" HorizontalAlignment="Left" >
<ListBoxItem>Orange</ListBoxItem>
<ListBoxItem>Green</ListBoxItem>
<ListBoxItem>Blue</ListBoxItem>
<ListBoxItem>Gray</ListBoxItem>
<ListBoxItem>LightGray</ListBoxItem>
<ListBoxItem>Red</ListBoxItem>
</ListBox>
<TextBox Height="23" Name="textBox1" Width="120" Margin="10,10,0,0" HorizontalAlignment="Left" >
<TextBox.Text>
<Binding ElementName="mcListBox" Path="SelectedItem.Content"/>
</TextBox.Text>
</TextBox>
<Canvas Margin="10,10,0,0" Height="200" Width="200" HorizontalAlignment="Left" >
<Canvas.Background>
<Binding ElementName="mcListBox" Path="SelectedItem.Content"/>
</Canvas.Background>
</Canvas>
</StackPanel>

If you look at the TextBox XAML code, you will see the Binding within the TextBox.Text property that sets the binding from TextBox to another control and another control ID is ElementName and another control's property is Path. So in the following code, we are setting the SelectedItem.Content property ofListBox to the TextBox.Text property.

<TextBox.Text>

Now the same applies to the Canvas.Background property, where we set it to theSelectedItem.Content of the ListBox. Now, every time you select an item in the ListBox, theTextBox.Text and Canvas.Background properties are set to that selected item in the ListBox.

<Canvas.Background>
<Binding ElementName="mcListBox" Path="SelectedItem.Content"/>
</Canvas.Background>

Summary

In this article, I explained how to create and use a ListBox control available in WPF and WP8. We saw how to add items to a ListBox, change item properties and add images add check boxes. In the end of this article, we saw how data binding works in ListBox and how to bind a ListBox with data coming from objects, databases and other controls.

How to use ListBox in WPF and windows phone application Part 5?

Now we add a ListBox control and set its ItemsSource property as the first DataTable of the DataSetand set ItemTemplate to the resource defined above.

Now in our code behind, we define the following variables.

public SqlConnection connection;

public SqlCommand command;

string sql = "SELECT ContactName, Address, City, Country FROM Customers";

string connectionString = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\NORTHWND.MDF;Integrated Security=True;Connect Timeout=30;User Instance=True";

Now on the Windows_Loaded method, we call the BindData method and in the BindData method, we create a connection, data adapter and fill in the DataSet using the SqlDataAdapter.Fill() method.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
BindData();
}

private void BindData()
{
DataSet dtSet = new DataSet();
using (connection = new SqlConnection(connectionString))
{
command = new SqlCommand(sql, connection);
SqlDataAdapter adapter = new SqlDataAdapter();
connection.Open();
adapter.SelectCommand = command;
adapter.Fill(dtSet, "Customers");
listBox1.DataContext = dtSet;
}
}

Data Binding with XML

Now let's look at how to bind XML data to a ListBox control. The XmlDataProvider is used to bind XMLdata in WPF.

Here is an XmlDataProvider defined in XAML that contains books data. The XML data is defined within the x:Data tag.

<XmlDataProvider x:Key="BooksData" XPath="Inventory/Books">
<x:XData>
<Inventory xmlns="">
<Books>
<Book Category="Programming" >
<Title>A Programmer's Guide to ADO.NET</Title>
<Summary>Learn how to write database applications using ADO.NET and C#.
</Summary>
<Author>Mahesh Chand</Author>
<Publisher>APress</Publisher>
</Book>
<Book Category="Programming" >
<Title>Graphics Programming with GDI+</Title>
<Summary>Learn how to write graphics applications using GDI+ and C#.
</Summary>
<Author>Mahesh Chand</Author>
<Publisher>Addison Wesley</Publisher>
</Book>
<Book Category="Programming" >
<Title>Visual C#</Title>
<Summary>Learn how to write C# applications.
</Summary>
<Author>Mike Gold</Author>
<Publisher>APress</Publisher>
</Book>
<Book Category="Programming" >
<Title>Introducing Microsoft .NET</Title>
<Summary>Programming .NET
</Summary>
<Author>Mathew Cochran</Author>
<Publisher>APress</Publisher>
</Book>
<Book Category="Database" >
<Title>DBA Express</Title>
<Summary>DBA's Handbook
</Summary>
<Author>Mahesh Chand</Author>
<Publisher>Microsoft</Publisher>
</Book>
</Books>
</Inventory>
</x:XData>
</XmlDataProvider>

To bind an XmlDataProvider, we set the Source property inside the ItemsSource of a ListBox to thex:Key of XmlDataProvider and XPath is used to filter the data. In the ListBox.ItemTempate, we use the Binding property.

The output of the preceding code looks as in Figure 11.

code behind file

How to use ListBox in WPF and windows phone application Part 4?

The following XAML code generates two ListBox control and two Button controls.

On the Window loaded event, we create and load data items to the ListBox by setting the ItemsSourceproperty to an ArrayList.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
// Get data from somewhere and fill in my local ArrayList
myDataList = LoadListBoxData();
// Bind ArrayList with the ListBox
LeftListBox.ItemsSource = myDataList;
}

/// <summary>
/// Generate data. This method can bring data from a database or XML file
/// or from a Web service or generate data dynamically
/// </summary>
/// <returns></returns>
private ArrayList LoadListBoxData()
{
ArrayList itemsList = new ArrayList();
itemsList.Add("Coffie");
itemsList.Add("Tea");
itemsList.Add("Orange Juice");
itemsList.Add("Milk");
itemsList.Add("Mango Shake");
itemsList.Add("Iced Tea");
itemsList.Add("Soda");
itemsList.Add("Water");
return itemsList;
}

On the Add button click event handler, we get the value and index of the selected item in the left sideListBox and add that to the right side ListBox and remove that item from the ArrayList that is our data source. The ApplyBinding method simply removes the current binding of the ListBox and rebinds with the updated ArrayList.

private void AddButton_Click(object sender, RoutedEventArgs e)
{
// Find the right item and it's value and index
currentItemText = LeftListBox.SelectedValue.ToString();
currentItemIndex = LeftListBox.SelectedIndex;

RightListBox.Items.Add(currentItemText);
if (myDataList != null)
{
myDataList.RemoveAt(currentItemIndex);
}

// Refresh data binding
ApplyDataBinding();
}
/// <summary>
/// Refreshes data binding
/// </summary>
private void ApplyDataBinding()
{
LeftListBox.ItemsSource = null;
// Bind ArrayList with the ListBox
LeftListBox.ItemsSource = myDataList;
}

Similarly, on the Remove button click event handler, we get the selected item text and index from the right side ListBox and add that to the ArrayList and remove from the right side ListBox.

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
// Find the right item and it's value and index
currentItemText = RightListBox.SelectedValue.ToString();
currentItemIndex = RightListBox.SelectedIndex;
// Add RightListBox item to the ArrayList
myDataList.Add(currentItemText);

RightListBox.Items.RemoveAt(RightListBox.Items.IndexOf(RightListBox.SelectedItem));

// Refresh data binding
ApplyDataBinding();
}

Data Binding with a Database

We use the Northwind.mdf database that is provided with SQL Server. In our application, we will read data from the Customers table. The Customers table columns looks as in Figure 9.

Figure 9

We will read ContactName, Address, City and Country columns in a WPF ListBox control. The finalListBox looks as in Figure 10.

Figure 10

Now let's look at our XAML file. We create a resources DataTemplate type called listBoxTemplate. A data template is used to represent data in a formatted way. The data template has two dock panels where the first panel shows the name and the second panel shows address, city and country columns using TextBlock controls.

<Window.Resources>
<DataTemplate x:Key="listBoxTemplate">
<StackPanel Margin="3">
<DockPanel >
<TextBlock FontWeight="Bold" Text="Name:"
DockPanel.Dock="Left"
Margin="5,0,10,0"/>
<TextBlock Text=" " />
<TextBlock Text="{Binding ContactName}" Foreground="Green" FontWeight="Bold" />
</DockPanel>
<DockPanel >
<TextBlock FontWeight="Bold" Text="Address:" Foreground ="DarkOrange"
DockPanel.Dock="Left"
Margin="5,0,5,0"/>
<TextBlock Text="{Binding Address}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding City}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding Country}" />
</DockPanel>
</StackPanel>
</DataTemplate>
</Window.Resources>

How to use a TextBlock in WPF and windows phone application Part-2?

Your comment on this post:

Related Articles