Sunday, June 19, 2011

Windows Phone 7 – Quick Tip #28 – Expand ListView Items to Full Screen

Let’s say you are building a Windows Phone 7 app that displays items in a list.  Within this list you want to display something that is right justified with the border of the list.  If we used the following XAML:

image

We end up with:

image

Which really isn’t what we want, we want the “Click Me” button right justified.

If we replace the above XAML with the followings snippet:

image

and note the following changes to the XAML:

  1. We added a resource to the grid that will be displaying the list of items.  It contains a style for the ListBoxItem with the key ListItem.  This sets the HorizontalContentAlignment=”Stretch”.
  2. Next we applied that style to the ItemContainerStyle=”{Static Resource ListItem}” of the list view.
  3. Finally if you noticed in the first chunk of XAML, we use a StackPanel.  A StackPanel only is as wide as it’s content.  We change this to a Grid which will take up the full width of the parent..

Now when we run our application we see the following which is what we expect:

image-twb

2 comments:

  1. please explain ...where you entered the content that are first,three ,fifth and last item

    these are in C# page?
    if yes..provide the code too

    ReplyDelete
  2. Great Article
    android based projects

    Java Training in Chennai

    FInal Year Project Centers in Chennai

    Java Training in Chennai

    projects for cse

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete