Avatar of gbzhhu
gbzhhu
Flag for United Kingdom of Great Britain and Northern Ireland

asked on 

XAML for a listbox item with a background image


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
Smartphone ProgrammingProgrammingSmartphonesMicrosoft Development

Avatar of undefined
Last Comment
gbzhhu

8/22/2022 - Mon