troubleshooting Question

XAML for a listbox item with a background image

Avatar of gbzhhu
gbzhhuFlag for United Kingdom of Great Britain and Northern Ireland asked on
Smartphone ProgrammingProgrammingSmartphonesMicrosoft Development
20 Comments1 Solution2985 ViewsLast Modified:

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
ASKER CERTIFIED SOLUTION
saragani

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 20 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 20 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros