I'm trying to trim text in a button, when it is to long, but it doesn't work. This is my Button:
<Button x:Name="button" Margin="-6,0,-6,0" HorizontalAlignment="Stretch" IsEnabled="{Binding Path=Enabled}" Click="button_Clicked" Style="{StaticResource ButtonInputButtonStyle}">
<StackPanel Orientation="Horizontal" Margin="0, 0, 0, 0">
<Image x:Name="buttonImage" Visibility="Collapsed" Stretch="Uniform" Margin="0, 0, 0, 0" VerticalAlignment="Center"/>
<TextBlock x:Name="buttonTextBlock" Text="{Binding Path=Label, Mode=OneWay}" VerticalAlignment="Center" Margin="0, 0, 0, 0" TextTrimming="WordEllipsis" TextWrapping="NoWrap"/>
</StackPanel>
</Button>
Related
I'm writing a UWP app and have a page with a full-page grid inside a scrollviewer with two even-width outer columns and two even-width inner columns. The right side of the page is a mirror of the left, and everything is aligned to the similar column on the opposite side. However, when I run my app and decrease the width, after a certain point only the third column shrinks. Before that point, all the columns adjust correctly. I don't have any width or minwidth properties set. If I set a fixed width on my grid, the columns resize to be even. I've tried changing which columns my elements are aligned to on various elements, removing the ScrollViewer, and double- and triple-checking for any min-widths being set anywhere.
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Away" FontSize="48" FontWeight="Bold"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/>
<Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/>
<RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" />
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/>
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/>
</Grid>
</ScrollViewer>
This is how my page looks in the designer:
OK... it appears to me that the layout is overconstrained - likely due to a lot of Blend arranging (a lot of crazy margins in there). If you want predictable layouts, I would recommend positioning the controls within the bounds of the grid sections that you expect to see them rather than trying to use margins to position them. Basically, which grid section do you want the element (Grid.Row=# Grid.Column=#), how many sections does it span (Grid.RowSpan=# Grid.ColumnSpan=#), which edges to align to (HorizontalAlignment=Left/Right/Center/Stretch VerticalAlignment=Left/Right/Center/Stretch), and how much space do you want from the edges (Margin=# # # #)?
So,
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
Becomes,
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
Additionally, I'm not sure you need the viewboxes, richtextboxes, and paragraphs with runs for what you are doing, but I do not know the entire scope of what you're trying to accomplish.
Try something like the following:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
<Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Viewbox Grid.Column="3">
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" >
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/>
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/>
<Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/>
<TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" />
</Grid>
</ScrollViewer>
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'm trying to add Buttons to my Scrollviewer, my result so far is negative, scrollviewer will not work. I tried wrapping around stackpanels but no luck. Can anyone guide me in the right direction? Thanks,
<ScrollViewer Name="flippy" Grid.Row="1" >
<Grid Width="Auto" Height="Auto" MinWidth="1366" MinHeight="668" Name="GridA" Grid.Row="1">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.png" Stretch="None" />
<StackPanel Height="150" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal">
<Button Content="button1" HorizontalAlignment="Left" VerticalAlignment="Center" Height="180" Width="179" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/storA.png"></ImageBrush>
</Button.Background>
</Button>
<Button Content="button2" HorizontalAlignment="Right" VerticalAlignment="Center" Height="140" Width="121" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/litenA.png"/>
</Button.Background>
</Button>
</StackPanel>
<StackPanel Height="103" Width="557" VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal">
<Button Content="button3" HorizontalAlignment="Center" VerticalAlignment="Center" Height="103" Width="553">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png"/>
</Button.Background>
</Button>
<Image Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png" />
</StackPanel>
</Grid>
</ScrollViewer>
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: