I defined a toolbar for my UWP app like this:
<StackPanel Orientation="Horizontal">
<ToggleButton Margin="5,5,0,5" Height="40" Width="30" Style="{StaticResource ToggleButtonRevealStyle}" Background="Transparent" BorderThickness="1,1,0,1" FontFamily="Segoe MDL2 Assets " Content=""/>
<ToggleButton Margin="0,5,5,5" Height="40" Width="30" Style="{StaticResource ToggleButtonRevealStyle}" Background="Transparent" BorderThickness="0,1,1,1" FontFamily="Segoe MDL2 Assets " Content=""/>
<Button Margin="5,5,0,5" Height="40" Width="30" Style="{StaticResource ButtonRevealStyle}" Background="Transparent" BorderThickness="1,1,0,1" FontFamily="Segoe MDL2 Assets " Content=""/>
<Button Margin="0,5,5,5" Height="40" Width="30" Style="{StaticResource ButtonRevealStyle}" Background="Transparent" BorderThickness="0,1,1,1" FontFamily="Segoe MDL2 Assets " Content=""/>
<TextBox Margin="5" TextAlignment="Center" Height="40" Width="1" BorderThickness="1" Background="Transparent" Padding="7" FontSize="16"/>
<Button Margin="5,5,0,5" Height="40" Width="30" Style="{StaticResource ButtonRevealStyle}" Background="Transparent" BorderThickness="1,1,0,1" FontFamily="Segoe MDL2 Assets " Content=""/>
<Button Margin="0,5,5,5" Height="40" Width="30" Style="{StaticResource ButtonRevealStyle}" Background="Transparent" BorderThickness="0,1,1,1" FontFamily="Segoe MDL2 Assets " Content=""/>
<Button Margin="5" Height="40" Width="40" Style="{StaticResource ButtonRevealStyle}" Background="Transparent" BorderThickness="1" FontFamily="Segoe MDL2 Assets " Content=""/>
<Button Margin="5" Height="40" Width="40" Style="{StaticResource ButtonRevealStyle}" Background="Transparent" BorderThickness="1" FontFamily="Segoe MDL2 Assets " Content=""/>
</StackPanel>
This is the (correct) result:
But sometimes the reveal effect is just not shown:
Why is this the case? How can I enforce the reveal effect at all times?
Related
Hi how to make this button:
<Button x:Name="StartButton" Background="Transparent" Click="StartButton_Click">
<Button.Content>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock FontSize="18" FontFamily="Segoe MDL2 Assets" Text=" " VerticalAlignment="Center"/>
<TextBlock FontSize="18" Text="Start"/>
</StackPanel>
</Button.Content>
</Button>
to fill its parent (horizontally) and to have its content aligned left?
This is the answer:
<Button x:Name="StartButton" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<TextBlock FontSize="18">
<Run FontFamily="Segoe MDL2 Assets" Text=" "/>
<Run Text="Start"/>
</TextBlock>
</Button>
In order to obtain the expected result, I recommend using <Run> to define the inlines of your TextBlock
This should look like :
<Button x:Name="StartButton" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Click="StartButton_Click">
<TextBlock FontSize="18" HorizontalAlignment="Left">
<Run FontFamily="Segoe MDL2 Assets" Text=" "/>
<Run Text="Start"/>
</TextBlock>
</Button>
I want to add the TextBlock into the Button content. But if i add the TextBlock into the button content the TextBlock font style is changing.
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<TextBlock Text="Vijaya dhas" FontSize="36" FontWeight="Black"/>
<TextBlock Text="Mobile App Developer Trainee" FontSize="26" FontWeight="SemiBold"/>
<TextBlock Text="Chennai" FontSize="24" FontWeight="Medium"/>
</StackPanel>
If i give like this my out put is:
If I give this into the button content:
<Button Height="200">
<Button.Content>
<StackPanel>
<TextBlock Text="Vijaya dhas" FontSize="36" FontWeight="Black"/>
<TextBlock Text="Mobile App Developer Trainee" FontSize="26" FontWeight="SemiBold"/>
<TextBlock Text="Chennai" FontSize="24" FontWeight="Medium"/>
</StackPanel>
</Button.Content>
</Button>
the out put is:
I don't want change the TextBlock font style. Please give any idea to keep the font style what ever it is.
Here i have attached my list box example for your review:
Without Using Button:
Using Button Content:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="List Example" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Example" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="2,0,2,0" Background="#FFE5E5E5">
<TextBlock Text="List Box With Button Content" Margin="0,150,0,0" FontSize="26" Foreground="Red" VerticalAlignment="Top" />
<ListBox HorizontalAlignment="Left" Margin="0,180,0,0" Name="listBox1" VerticalAlignment="Top" Width="480" ItemsSource="{Binding Content, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Button BorderBrush="Transparent" Template="{x:Null}">
<Button.Content>
<Border Margin="0,0,0,0" BorderThickness="1" BorderBrush="Gray" Padding="1" Width="476">
<StackPanel Orientation="Horizontal">
<Border Height="110" Width="110" Margin="5,0,0,0" BorderThickness="1" BorderBrush="Black">
<StackPanel Height="110" Width="110" Background="White">
<Image Source="/NewExample;component/Images/Koala.jpg" Stretch="Fill" Width="100" Height="100" Margin="0,0,0,0"/>
<Image Source="{Binding ImageView}" Stretch="Fill" Width="110" Height="110" Margin="0,-100,0,0"/>
</StackPanel>
</Border>
<TextBlock Text="{Binding TitleView}" Height="30" Width="230" Foreground="Black" Margin="10,0,0,0" TextWrapping="Wrap" FontWeight="Medium" FontSize="24" VerticalAlignment="Top"/>
<TextBlock Text="{Binding Time}" Width="100" Foreground="Black" Margin="30,0,0,0" FontSize="18"/>
<TextBlock Text="{Binding TypeViews}" Width="250" Foreground="Black" Margin="-360,30,0,0" FontSize="18" FontWeight="Medium" HorizontalAlignment="Left" />
<TextBlock Text="{Binding TextContent}" MaxHeight="84" Width="270" TextWrapping="Wrap" Foreground="Black" Margin="-450,50,0,0" FontWeight="Black" FontSize="19" TextTrimming="WordEllipsis" />
<Image Source="{Binding TypeImageView}" Height="35" Width="35" Stretch="Fill" Margin="-120,10,0,0"/>
<Image Width="50" Height="50" Source="{Binding ClickButton}" Stretch="Fill" Margin="-60,10,0,0" Name="balloon_disclosure"/>
<TextBlock Text="{Binding TextView}" Width="250" Foreground="Black" Margin="-360,100,0,0" FontSize="20" FontWeight="Medium" HorizontalAlignment="Left" />
</StackPanel>
</Border>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
To Get rid of the button's default padding, margin and styles etc, set its template to "{x:Null}"
<Button Height="200" Template="{x:Null}">
<Button.Content>
<StackPanel>
<TextBlock Text="Vijaya dhas" FontSize="36" FontWeight="Black"/>
<TextBlock Text="Mobile App Developer Trainee" FontSize="26" FontWeight="SemiBold"/>
<TextBlock Text="Chennai" FontSize="24" FontWeight="Medium"/>
</StackPanel>
</Button.Content>
</Button>
i have a listbox with around 150 items in it. the problem is that it is not taking any events. other listboxes have less than 90 items and they are working fine.
is there any limit or something which is preventing event handeling??
<ScrollViewer HorizontalAlignment="Left" Height="170" Margin="0,421,0,0" VerticalAlignment="Top" Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<ListBox Name="thirdList" Tap="firstList_SelectionChanged_1" Height="170" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0 0 0 0 " />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
vjamit please consider using LongListSelector for Windows Phone 8 applications and not the old ListBox.
I have tested LLS with more than 5k items and it loads and plays just fine.
Also there is no need at all to wrap LLS in a ScrollViewer. Check below example:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="LLSTemplate">
<Grid Tap="firstList_SelectionChanged_1">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="thirdList" Height="170" ItemTemplate="{StaticResource LLSTemplate}"/>
</Grid>
Let me know if the above works.
EDITED:
Try applying the following changes on the ScrollViewer: HorizontalScrollBarVisibility="Disabled". Tested with 500+ and it works. Seems like a "bug".
I have 5 horizontal listboxes with images and text in them.. the text is shown in textblock inside stackpanel(background as grey).. now if i change the background to black and opacity to 0.3, I start getting outofmemory.. what could be wrong?? here's my listbox :
<ScrollViewer x:Name="scroll1" HorizontalAlignment="Left" Height="200" Margin="0,27,0,0" VerticalAlignment="Top" Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" >
<ListBox Name="firstList" Height="200" ScrollViewer.VerticalScrollBarVisibility="Disabled" Tap="firstList_SelectionChanged_1" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0 0 0 0 " />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="200" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<Grid Margin="70,-240,-10,0" Width="50" Height="50" Background="Transparent">
<!--<TextBlock Text="Discount" Foreground="White" FontSize="15" Margin="15,0,5,0"/>-->
<Image Source="{Binding imageSource}" Width="50" Height="50" ></Image>
<TextBlock Text="{Binding discountPercentage}" TextWrapping="NoWrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
</Grid>
<StackPanel Width="150" Margin="0,-35,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<!--<TextBlock Text="Rs" Foreground="White" FontSize="20" Margin="30,0,5,0"/>-->
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
I have tried this and got outofmemoryerror:
<StackPanel Orientation="Vertical" Height="200" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<Grid Margin="70,-240,-10,0" Width="50" Height="50" Background="Transparent">
<!--<TextBlock Text="Discount" Foreground="White" FontSize="15" Margin="15,0,5,0"/>-->
<Image Source="{Binding imageSource}" Width="50" Height="50" ></Image>
<TextBlock Text="{Binding discountPercentage}" TextWrapping="NoWrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
</Grid>
<StackPanel Width="150" Margin="0,-35,0,0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black" Opacity="0.3">
<TextBlock Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</StackPanel>
self resolved. By replacing grid/stackpanel with a textblock on transparent image.
In my windows phone 8 application I'm displaying the result in list box. Every time I'm showing only 20 items in the list.
Now to show the next 20 items i want to add NEXT button and also to show the old items i want to add PREVIOUS buttons.
Below is my code block. In this i'm using the list box inside another list box to show the buttons after the list. But the list is not scrolling.
<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
<ListBox x:Name="outerList">
<ScrollViewer Margin="0,0,0,0">
<ListBox x:Name="companiesList" SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
<TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
</StackPanel>
<StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
<TextBlock x:Name="addressTextBlock" Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
</StackPanel>
<StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
<Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png" />
<TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
</StackPanel>
<Image x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<StackPanel Height="50" Orientation="Horizontal">
<Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
<Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
</StackPanel>
</ListBox>
</Grid>
Could you please help me how to add buttons to the list box which is scrollable.
You could put your ListBox inside another ListBox, where the items are the result ListBox and the buttons, e.g:
<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
<ListBox x:Name="outerList">
<ListBox x:Name="companiesList" Height="{Binding ActualHeight, ElementName=ContentPanel}" SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
<TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
</StackPanel>
<StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
<TextBlock x:Name="addressTextBlock" Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
</StackPanel>
<StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
<Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png" />
<TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
</StackPanel>
<Image x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Height="50" Orientation="Horizontal">
<Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
<Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
</StackPanel>
</ListBox>
</Grid>
When buttons tapped, you could modify the content of the inner ListBox: