In my code, I made a DataTemplate in a SurfaceListBox. I added a drop shadow to the stack panel as well as to the textblock within the stack panel. When I run it, the drop shadow on the textblock appears on the textblock UI element itself instead of the individual characters of text. I am wondering why this is happening and if there is a way to fix it, so the drop shadow does appear on the text.
<DataTemplate>
<StackPanel Background="WhiteSmoke" Height="190" Width="190">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image VerticalAlignment="Top" HorizontalAlignment="Center" Height="140" Width="140" Stretch="Fill" Source="{Binding ImagePath}" />
<TextBlock Grid.Row="1" Text="{Binding Name}" Background="#9FCC19" Width="190" Height="50" TextAlignment="Center" VerticalAlignment="Center" Foreground="WhiteSmoke"
FontFamily="Segoe" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" RenderingBias="Performance"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<StackPanel.Effect>
<DropShadowEffect ShadowDepth="2"/>
</StackPanel.Effect>
</StackPanel>
</DataTemplate>
You need to get rid of the Background color of the TextBlock. You can put a Rectangle behind the TextBlock to achieve the same effect.
<DataTemplate>
<StackPanel Background="WhiteSmoke" Height="190" Width="190">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image VerticalAlignment="Top" HorizontalAlignment="Center" Height="140" Width="140" Stretch="Fill" Source="{Binding ImagePath}" />
<Rectangle Fill="#9FCC19" Grid.Row="1" Width="190" Height="50"/>
<TextBlock Grid.Row="1" Text="{Binding Name}" Width="190" Height="50" TextAlignment="Center" VerticalAlignment="Center" Foreground="WhiteSmoke"
FontFamily="Segoe" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" RenderingBias="Performance"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<StackPanel.Effect>
<DropShadowEffect ShadowDepth="2"/>
</StackPanel.Effect>
</StackPanel>
</DataTemplate>
Related
I'm facing a strange issue on one of my computer. The problem is related to how text is being rendered on two different computers.
I'll start by sharing two screenshots. One is correct version followed by the problematic one.
Here you can see the text distortion in later screenshot.
Following is the XAML. Sections "CountdownView" and "MessageView" are visible, and "Response Indicator" is hidden in both cases. Verdana Font is bound to both textblocks.
<!--PollingInfoView-->
<Grid
x:Name="PollingInfoView"
Width="auto" Height="auto"
Visibility="Collapsed"
VerticalAlignment="Top"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.67*"></ColumnDefinition>
<ColumnDefinition Width="0.15*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Background>
<SolidColorBrush
Color="{Binding Path=PollingInfoBackgroundColor, Mode=OneWay}"
Opacity="{Binding Path=PollingInfoBackgroundOpacity, Mode=OneWay}"
>
</SolidColorBrush>
</Grid.Background>
<!--CountdownView-->
<Grid Width="auto" Height="auto" >
<Viewbox Stretch="Uniform" Width="auto" Height="auto" >
<Border x:Name="ResponsiveIndicator" Visibility="Hidden" Background="DarkRed" Margin="5,0,0,0">
<TextBlock x:Name="tbResponseIndicatorText" VerticalAlignment="Center" HorizontalAlignment="Center"
Foreground="{Binding Path=PollingInfoForegroundColor, Mode=OneWay}"
Width="auto" Height="auto"
Margin="0,3,0,3"
FontFamily="{Binding Path=PollingInfoFontFamily, Mode=OneWay}" FontSize="12"
>
<TextBlock.Effect>
<DropShadowEffect Color="{Binding Path=DropShadowColor, Mode=OneWay}"
Opacity="{Binding Path=DropShadowOpacity, Mode=OneWay}"
BlurRadius="{Binding Path=DropShadowBlurRadius, Mode=OneWay}"
Direction="240"
ShadowDepth="{Binding Path=DropShadowDepth, Mode=OneWay}"
>
</DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
</Border>
</Viewbox>
</Grid>
<!--MessageView-->
<Border Grid.Column="1" Width="auto" Height="auto" >
<Viewbox Stretch="Uniform" Width="auto" Height="auto" >
<Grid
Width="auto" Height="auto"
x:Name="MessageView">
<TextBlock Name="tbMessage"
TextAlignment="Center"
HorizontalAlignment="Center"
Foreground="{Binding Path=PollingInfoForegroundColor, Mode=OneWay}"
FontSize="32"
Width="auto" Height="auto"
FontFamily="{Binding Path=PollingInfoFontFamily, Mode=OneWay}"
Text="Please Vote Now"
>
<TextBlock.Effect>
<DropShadowEffect Color="{Binding Path=DropShadowColor, Mode=OneWay}"
Opacity="{Binding Path=DropShadowOpacity, Mode=OneWay}"
BlurRadius="{Binding Path=DropShadowBlurRadius, Mode=OneWay}"
Direction="240"
ShadowDepth="{Binding Path=DropShadowDepth, Mode=OneWay}"
>
</DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
</Grid>
</Viewbox>
</Border>
<!--Response Indicator-->
<Border Grid.Column="2" Width="auto" Height="auto" >
<Viewbox Stretch="Uniform" Width="auto" Height="auto" >
<Grid
x:Name="CountdownView"
Width="auto" Height="auto"
HorizontalAlignment="Right">
<TextBlock Name="tbCountDown" Visibility="Hidden" TextAlignment="Center" HorizontalAlignment="Center"
Foreground="{Binding Path=PollingInfoForegroundColor, Mode=OneWay}"
FontSize="32"
FontFamily="{Binding Path=PollingInfoFontFamily, Mode=OneWay}"
Width="auto" Height="auto"
Text="5"
>
<TextBlock.Effect>
<DropShadowEffect Color="{Binding Path=DropShadowColor, Mode=OneWay}"
Opacity="{Binding Path=DropShadowOpacity, Mode=OneWay}"
BlurRadius="{Binding Path=DropShadowBlurRadius, Mode=OneWay}"
Direction="240"
ShadowDepth="{Binding Path=DropShadowDepth, Mode=OneWay}"
>
</DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
</Grid>
</Viewbox>
</Border>
</Grid>
Note: The screen resolution of the computer having trouble is: 1366x768. It's Windows 7 Enterprise edition with "Intel(R) HD Graphics Family" Display adaptors. Though I've couldn't reproduce the issue on another computer with 1366x768 resolution, however, that computer has different Display drivers installed.
Any solution, idea or hint would be much appreciated. Thanks.
I can't find a way to make these images in a scrollviewer horizontally.
They're like this
IMAGE1
IMAGE2
IMAGE3
I want
IMAGE1 IMAGE2 IMAGE3
So I can scroll them horizontally. I've already tried google and stackoverflow and I can't find a working solution :(
Code
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I am not sure you are speaking about images, Image1 Image2 Image3. You would have mentioned them in the given code snippet. As I am not sure about the ques, I have added 2 scenarios.
Scenario 1: I could see 3 Image control in the 0th Column. If you need them to be shown horizontally, you could use StackPanel instead of Grid, and can use the Orientation property as Horizontal. or you need to add 3 columns to the 0th Column Grid, and you can add those images respectively.
Scenario 2: and in the 1st Grid, you have a scrollviewer, if you need the image controls to be visible horizontally inside those, the same you could use the Orientation property of StackPanel (stackpanel inside the wrappanel) to Horizontal instead of Vertical.
Hope this helps you.
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal">
<Button Content="Button1" Foreground="Red" />
<Button Content="Button2" Foreground="Red" />
<Button Content="Button3" Foreground="Red" />
<Button Content="Button4" Foreground="Red" />
<Button Content="Button5" Foreground="Red" />
<Button Content="Button6" Foreground="Red" />
</StackPanel>
</ScrollViewer>
Try this way, adding a custom panel template to your listbox that is horizontal.
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I need the textbox1 control ought to put by lable1 and textbox2 control ought to put alongside lable2. I am utilizing single cell from a Grid for this whole control allignment. i can't drag and place the controls wherever i need. is there some other conceivable approach to drag and place my controls inside a cell in grid?
Here's my XAML code..
<Grid Background="#BFBFBF">
<StackPanel Margin="2,2,2,2" >
<Grid Margin="2,2,2,2" VerticalAlignment="Top">
<Grid.RowDefinitions >
<RowDefinition Height="35*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="35*"/>
</Grid.RowDefinitions>
<!-- 1st Content-->
<Border Margin="4,2,2,2" BorderBrush="#FF0100A3" Grid.Row="0" CornerRadius="3,3,3,3" VerticalAlignment="Top" BorderThickness="2,2,2,2" Height="30" MouseLeftButtonDown="brdSectionOne_MouseLeftButtonDown">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5E68CE" Offset="0"/>
<GradientStop Color="#FF5B64CA" Offset="1"/>
<GradientStop Color="#FF000C82" Offset="0.356"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Section 1" Grid.ColumnSpan ="2" Foreground="White" Grid.Row="0" FontFamily="Segoe UI" FontSize="13" Margin="8,5,2,0" VerticalAlignment="Top" FontWeight="Normal" Cursor="Hand" />
</Border>
<StackPanel x:Name="spnlFirstSection" Grid.Row="0" VerticalAlignment="Bottom" Height="436" Margin="3,35,3,0" >
<Border Margin="1,1,1,1" CornerRadius="3,3,3,3" VerticalAlignment="Top" BorderThickness="2,2,2,2" Height="430" Background="#FFFFFFFF" BorderBrush="#FF4C4BEE" >
<StackPanel Grid.ColumnSpan ="2" Grid.Row="0" Height="445" Margin="6,6,6,0" VerticalAlignment="Top" >
<Label x:Name="lbl_1" Content="Label 1" Margin="50,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="-1.895,0" FontSize="14"/>
<TextBox x:Name="textbox1" Margin="300,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="textbox1" Height="25" TextWrapping="Wrap" Width="250" FontSize="18"/>
<Label x:Name="lbl_2" Content="Label 2" Margin="50,30,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="-1.895,0" FontSize="14"/>
<TextBox x:Name="textbox2" Margin="300,30,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="textbox2" Height="25" TextWrapping="Wrap" Width="250" FontSize="18"/>
</StackPanel>
<!--<TextBlock Text="Section 1 Content" Grid.ColumnSpan ="2" Foreground="#FF000000" Grid.Row="0" FontFamily="Segoe UI" FontSize="13" Margin="6,6,6,0" VerticalAlignment="Top" FontWeight="Normal" Cursor="Hand" Height="445" />-->
</Border>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
A StackPanel stacks either Vertically (default) or Horizontally. Like so:
<StackPanel>
<TextBlock Text="Foo"/>
<TextBlock Text="Bar"/>
</StackPanel>
Will render:
Foo
Bar
While
<StackPanel Orientation="Horizontal">
<TextBlock Text="Foo"/>
<TextBlock Text="Bar"/>
</StackPanel>
Will render:
Foo Bar
If you want something to look like a Grid you should use a Grid! So if you want something like this:
LabelOne: Foo
LabelTwo: Bar
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="LabelOne:" /> <!-- Grid.Row and Grid.Column default to 0 -->
<Label Content="LabelTwo:" Grid.Row="1" />
<TextBox Text="Foo" Grid.Column="1" />
<TextBox Text="Bar" Grid.Row="1" Grid.Column="1" />
</Grid>
You could also try and nest StackPanels like so:
<StackPanel Orientation="Horizontal">
<StackPanel>
<Label Content="LabelOne:" />
<Label Content="LabelTwo:" />
</StackPanel>
<StackPanel>
<TextBox Text="Foo" />
<TextBox Text="Bar" />
</StackPanel>
</StackPanel>
But that will problably get you some unwanted behaviours.
OK... so this solution doesn't help
XAML is here
<ListBox ItemsSource="{Binding Path=ContentItems}" Background="White" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2" Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label VerticalAlignment="Center" Margin="0,0,0,5">Start</Label><svl:TimeEditor Value="{Binding Path=FormatedStart}" Width="87" HorizontalAlignment="Left" Margin="2,8" Name="dtpStart" FontSize="12" Height="25" VerticalAlignment="Center" />
<Label VerticalAlignment="Center" Margin="0,0,0,5">End</Label><svl:TimeEditor Value="{Binding Path=FormatedEnd}" Width="87" HorizontalAlignment="Left" Margin="2,8" Name="dtpEnd" FontSize="12" Height="25" VerticalAlignment="Center" />
</StackPanel>
<TextBlock Grid.Row="1" TextWrapping="Wrap" Name="tbText" Text="{Binding Path=Data}"></TextBlock>
</Grid>
<Grid Grid.Column="1" Visibility="Collapsed">
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The following will helps for text wrapping:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
Well your TextBlock does not need to wrap since your specifying Width as Auto for it's ColumnDefinition which allows it to take all the Width it needs to fit Content even at the cost of overflowing. You either need to set the Column's Width to "*" to allow the TextWrapping to kick in when requested width exceeds allowable or manually force a MaxWidth on it using a Binding like
<TextBlock Name="tbText" Grid.Row="1" MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth}" Text="{Binding Path=Data}" TextWrapping="Wrap" />
Hi can I force scrollbars to appear in listbox when its content do not fit. I really need it.
To create tabcontrol item I concucted this xaml:
<TabControl.ContentTemplate>
<DataTemplate>
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible">
<Grid Name="RssFeedContainerGrid" >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controls:ucRssFeed Grid.Row="1" RssUri="{Binding FeedUri}" />
</Grid>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
and ucRssFeed contains listbox.
Here some xaml from that control where I want scrolling to take place:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="10" x:Name="RssFeedCellblock">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Margin="10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="0">
<!-- Topic label-->
<TextBlock Cursor="Hand" FontWeight="Bold" Text="{Binding XPath=title}" Tag="{Binding XPath=link}" Foreground="{StaticResource RSS_Topic_Title}" MouseDown="TextBlock_MouseDown">
</TextBlock>
<!-- Breakline -->
<Line Stroke="{StaticResource RSS_Topic_Title}" Y1="5" Y2="5" X1="0" X2="{Binding ElementName=NewsListBox, Path=ActualWidth}" Opacity="0.7" StrokeThickness="1"/>
<!-- publication date label -->
<TextBlock Text="{Binding XPath=pubDate}" Opacity="0.5" />
<!-- Description textblock -->
<TextBlock FontSize="10" FontFamily="Times New Roman" x:Name="descriptionTextBlock"
Text="{Binding XPath=description, Converter={StaticResource HtmlToPlainTextConverter}}" Margin="10"
TextWrapping="Wrap" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to set the Height property of your ListBox for the Scrollbar to appear listbox automatically show scrollbar when the content is more