Msdn Teaching Short Film WPF 9 (WPF style and resource 2)

WPF style and resource 2

We know that we can write the style of the control into the style and apply it directly. Today, let's dive into resource items that implement images and text in ListBox.

This is what we want to achieve today.

Open Visual Studio and create a WPF ApplicationProgram. Drag a ListBox on the form.

 
<ListBox Height ="184"Horizontalalignment ="Left"Margin ="49,42"Name ="Listbox1"Verticalalignment ="Top"Width ="384"/>
 

We can see that there are text and images in listbox1. We can guess that it can be composed of two textblocks and an image control. We need to declare two attributes, one name and one image.

So we create a new class: users. CS

Write in the class:

  Class Users { Private   String _ Name; Private   String _ ImagePath; Public   String Name { Get { Return _ Name ;} Set {_ Name = Value ;}}Public   String ImagePath { Get { Return _ ImagePath ;} Set {_ ImagePath = Value ;}} Public Users ( String Name, String ImagePath ){ This . _ Name = Name; This . _ ImagePath = ImagePath ;}Public   Static Users [] user = { New Users (" Dingli "," Images/airplane.bmp "), New Users (" Brenda Barret "," Images/astro.bmp "), New Users (" Carl Christiansen "," Images/beach.bmp "), New Users (" Delia Davis "," Images/butterfl.bmp "), New Users (" Egbert Evesham "," Images/car.bmp "), New Users (" Fenella Ferguson "," Images/cat.bmp "), New Users (" Graham Garden "," Images/chess.bmp "),New Users (" Val vignette "," Images/snwflake.bmp "), New Users (" William Watson "," Images/drip.bmp "), New Users (" Xanthe xardos "," Images/user.bmp "), New Users (" Ybrahim Yavin "," Images/guest.bmp "), New Users (" Zaphod zacharzeski "," Images/soccer.bmp ")};}

Here we instantiate a users array named user

Then we write in mainwindow. XAML. CS:

Here, datacontext is the datacontext under mainwindow, and users. user is the initialized array.

Now we have set the style in window. Resources.

  <Window. Resources> <style X: Key =" Liststyle1 "Targettype ="{X: Type ListBox} "> <Setter property =" Itemtemplate "> <Setter. value> <datatemplate> <grid. columndefinitions> <columndefinition width =" * "/> <Columndefinition width =" * "/> <Columndefinition width =" * "/> </Grid. columndefinitions> <grid. rowdefinitions> <rowdefinition Height =" 60 "/> </Grid. rowdefinitions> <Image Source =" {Binding ImagePath} "Margin =" 5 "Grid. Row =" 0 "Grid. Column =" 0 "/> <Textblock grid. Row =" 0 "Grid. Column =" 1 "Margin =" 5 "Text =" Username: "/> <Textblock grid. Row =" 0 "Grid. Column =" 2 "Margin =" 5 "Text =" {Binding name} "/> </GRID> </datatemplate> </setter. value> </setter> </style> </window. Resources>

Here we give him a grid, where we put three controls, one image and two textblocks. Binding is used here to bind the two attributes we declare. How does this attribute come from? Is us

This sentence framed in redCodeDatacontext = users. user;

Then we add the following binding in listbox1.

Itemssource ="{Binding}"Style ="{Staticresource liststyle1}"

Add the two.

:

See it. But it is still different from what we started to look. Have you seen the image?

Obviously, it is hard to see. Let's process it.

Put the image in border:

  <Border margin =" 5 "Grid. Row =" 0 "Grid. Column =" 0 "Borderthickness =" 3 "> <Border. borderbrush> <lineargradientbrush startpoint =" 0, 0 "Endpoint =" 0, 1 "> <Gradientstop offset =" 0 "Color ="Red "/> <Gradientstop offset =" 1 "Color =" Blue "/> </Lineargradientbrush> </border. borderbrush> <grid> <Image Source =" {Binding ImagePath} "/> </GRID> </Border>

:

See the border.

If the image is transparent, we can add a rectangle to it.

<Rectangle> <rectangle. Fill> <lineargradientbrush startpoint ="0, 0"Endpoint ="0, 1"> <Gradientstop color ="#444"Offset ="0"/> <Gradientstop color ="# Fff"Offset ="1"/> </Lineargradientbrush> </rectangle. Fill> </rectangle>
 

:

It is not obvious to the above image because the image is not transparent.

End.