We help IT Professionals succeed at work.
Get Started

XAML for a listbox item with a background image

2,972 Views
Last Modified: 2013-12-21

Hi,

I am developing a Windows Mobile 7 app to mimic an iPhone app I already developed.  I am a C# developer and thought the Apple way would be hard but I found it fairly easy.  Now trying to do the same thing in XAML is a nightmare or I am looking at the wrong things.

I would like to have a listbox with the items having an image as a background and also 4 textblocks.  The list item obvisouly needs to show a click interaction (shows visual change when clicked) which I think is build in.  I am using a button but it hides the textblocks, doesn't scale into the stackpanel I am putting it in.

Attached image for list item background, plus what code I currently have.  Hope someone can do this easily (it is said to be easy but I am finding it hard)

Thanks


<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
            <Image Source="images/Background@2x.png" Stretch="Fill" Margin="0,0,0,0"/>

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="23,23,0,0" Name="textBlock1" Text="Accounts" VerticalAlignment="Top" Foreground="#FF1D1B1B" />

            <ListBox Grid.RowSpan="2" Height="714" HorizontalAlignment="Left" Margin="0,54,0,0" Name="lstAccounts" VerticalAlignment="Top" Width="480" BorderThickness="1" BorderBrush="Silver"  >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Button Width="460" Height="120"  Margin="0,0,0,0" Padding="0" Click ="Account_Click">
                            <Button.Content>
                                <StackPanel Orientation="Horizontal" Width="400" Height="80" Margin="0" >
                                    <Image Source="images/SingleCellBlue@2x.png" Stretch="Uniform" Margin="0" ></Image>

                                    <StackPanel Orientation="Vertical" Height="80">
                                        <StackPanel Orientation="Horizontal" Height="40">
                                            <TextBlock Width="120" FontSize="20" Text="Number:" Height="40" ></TextBlock>
                                            <TextBlock Width="320" FontSize="20" Text="{Binding Number}" Height="40" ></TextBlock>
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal" Height="40">
                                            <TextBlock Width="120" FontSize="20" Text="Description:" Height="40" ></TextBlock>
                                            <TextBlock Width="320" FontSize="20" Text="{Binding CompanyName}" Height="40" ></TextBlock>
                                        </StackPanel>
                                    </StackPanel>
                                </StackPanel>
                            </Button.Content>
                        </Button>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>            
        </Grid>
        
    </Grid>

Open in new window

SIngleCellBlue.png
Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 20 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE