I have space between my items and I cant remove it. I have been Googling about ItemsControl all day and found nothing that works. It also didn't work with listbox. It even made it worse.
Anyone has an idea?
Here is my code:
<ItemsControl BorderThickness="0" ItemsSource="{Binding Items}" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="0,0,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type newsSubscriber:Item}">
<Border VerticalAlignment="Stretch" SnapsToDevicePixels="True" BorderThickness="0">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding RepeatImagePath}"/>
</Border.Background>
<StackPanel Cursor="Hand" VerticalAlignment="Stretch">
<StackPanel.InputBindings>
<MouseBinding MouseAction="LeftClick" Gesture="LeftClick" Command="{Binding GoToWebCommand}" />
</StackPanel.InputBindings>
<StackPanel VerticalAlignment="Stretch" FlowDirection="RightToLeft" Height="{Binding hight}" Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding RepeatImagePath}"/>
</StackPanel.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" Width="70" Text="{Binding time}"/>
<TextBlock Language="he-il" TextWrapping="Wrap" HorizontalAlignment="Right" VerticalAlignment="Center" Width="300" Text="{Binding title}"/>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Width="38">
<Image Stretch="None" Source="{Binding ArrowImagePath}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
output pic:
You have probably Height="{Binding hight}" property set to some large value.
<StackPanel VerticalAlignment="Stretch"
FlowDirection="RightToLeft"
Height="{Binding hight}"
Orientation="Horizontal"
HorizontalAlignment="Right">
You where on the right track with the FrameworkElement.Margin Set the Value="-1". It creates a small overlap that removes the space.
<Setter Property="FrameworkElement.Margin" Value="-1"/>
Related
I'm struggling with performance in my WPF application.
I have a ListView i populate with some buttons, which contain a bunch of TextBlocks with bindings.
I managed to get Virtualization going, so it seems the same whether its 20 or 2000 i load.
The problem is between 5 and 20. It simply appears that rendering a bunch of somewhat complicated User Controls, is simply too much for basic sub-par hardware.
This is how my Buttons/UserControls in my ListView looks ->
ListViewSample
I feel like WPF should be able to render this on sup-par hardware.
This is the xaml for the ListView:
<ListView ItemsSource="{Binding ButtonModels, IsAsync=True}"
Margin="0"
x:Name="ButtonsListView"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.VirtualizationMode="Recycling"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SnapsToDevicePixels="True"
Background="Transparent"
BorderThickness="0">
<ListView.Resources>
<Style TargetType="ScrollBar">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform CenterX="0" CenterY="0"
ScaleX="3" ScaleY="3" />
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<local:UniformGridPanel IsItemsHost="True" VerticalAlignment="Top" Height="Auto" Rows="4" Columns="{Binding Columns}" Margin="0">
</local:UniformGridPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Button Height="117" Width="Auto"
Margin="6,0,6,0"
x:Name="MasterButton"
Click="MasterButton_Click"
Visibility="{Binding IsVisible, Converter={StaticResource BoolToVis}}"
Template="{StaticResource ProductButtonTemplate}"
Padding="0">
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here is the xaml for the Button template:
<ControlTemplate TargetType="{x:Type Button}" x:Key="ProductButtonTemplate">
<UserControl>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="{Binding HeaderBrush}" CornerRadius="3,3,0,0">
<TextBlock VerticalAlignment="Center" FontSize="12"
Text="{Binding DisplayName}"
Foreground="{Binding FontIsWhite, Converter={StaticResource BoolToFontColour}}"
FontFamily="{StaticResource DefaultRegular}"
Padding="8,0,0,0"/>
</Border>
<Border Grid.Row="1" Background="{StaticResource LightGrey}" CornerRadius="0,0,4,4" BorderBrush="{StaticResource BorderGrey}" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
FontSize="12" TextTrimming="CharacterEllipsis" Text="Nr.:"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding Combinations}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding SizeAndColour}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<Grid Grid.Row="3" Grid.Column="0"
Width="24" Height="24"
VerticalAlignment="Center" HorizontalAlignment="Left"
Margin="8,0,0,0"
Visibility="{Binding ShowStockValue, Converter={StaticResource BoolToVis}}">
<Ellipse Fill="{Binding StockStatus, Converter={StaticResource EnumToBrush}}" Stroke="{StaticResource LightGrey}" StrokeThickness="0.1">
</Ellipse>
<TextBlock Text="{Binding Stock}"
Foreground="{StaticResource White}"
FontSize="9"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<TextBlock Grid.Row="0" Grid.Column="1"
FontSize="12" TextTrimming="CharacterEllipsis" Text="{Binding ProductNr}"
Foreground="{StaticResource Black}"
VerticalAlignment="Center" HorizontalAlignment="Right"
FontFamily="{StaticResource DefaultFont}"
Padding="0,0,8,0"/>
<Label Grid.Row="3" Grid.Column="1" FontSize="13"
Padding="0,0,8,8"
Content="{Binding Price}"
Foreground="{StaticResource Black}"
FontWeight="Bold"
FontFamily="{StaticResource DefaultFont}"
VerticalContentAlignment="Bottom" HorizontalContentAlignment="Right"
ContentStringFormat="{}{0:#,0.00}" />
</Grid>
</Border>
</Grid>
</UserControl>
</ControlTemplate>
tldr; I'm looking for performance tips on how to make this render faster. And this is BEFORE i reach a size in the ListView where my virtualization kicks in (Which works flawlessly)
Thanks in advance!
I managed to find a high performance solution - it just wasn't what i would expect to be better performing.
So instead of having one ListView with a binding, changing the data in the binding and repopulating the Listview, i just spawn a ListView for every collection i have.
It seems weird to me, that having a bunch of ListViews and just collapsing and showing them is more effcient, but it performs absolutely flawlessly.
Currently in my calendar section, i get events from google calendar, and the items are show like this.
what I want is show this elements, one by one and adjust the height so its fits the element content which you are seeing and then scroll through the list to see the others elements.
And everytime you scroll down the listview is going to readjust the height to fit the new element.
Something like this
Then you scroll
But i dont know who to do this, if i bind the height to the wrapper of the element in the datatemplate just ignore the bind. And you can scroll through the elements without select them, so i cant modify the template for selected items, or bind with the selected item.
Searching i have found some ways to modify the item height to the parent height, but that's not what i want, is the opposite.
my xaml
<ListView Background="Transparent"
x:Name="DatosEvento"
Margin="5"
MinWidth="{Binding ActualWidth, ElementName=Calendar}"
Height="250"
ItemsSource="{Binding Path=Eventos}">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel Width="350" Orientation="Horizontal">
<StackPanel Margin="2">
<Border BorderThickness="1" Background="CornflowerBlue" BorderBrush="Black">
<TextBlock Text="Nombre Organizador" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Organizer.DisplayName}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Correo Organizador" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Organizer.Email}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Nombre Evento" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Summary}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Estado" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Status}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Fecha Inicio dd/mm/yyyy" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Start.DateTime}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Fecha actualización" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Updated, ConverterCulture={x:Static SystemGlobalization:CultureInfo.DefaultThreadCurrentCulture}}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Fecha Fin dd/mm/yyyy" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=End.DateTime}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Enlace" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=HtmlLink}" Foreground="Blue" TextDecorations="Underline" MouseDown="TextBlockHiperLink_MouseDown" Cursor="Hand"/>
</StackPanel>
<Line X1="10" X2="300" Margin="5" Stroke="Black" StrokeThickness="2"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Simple template:
<ListView SelectedIndex="0">
<ListView.Template>
<ControlTemplate TargetType="ListView">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ContentTemplate="{TemplateBinding ItemTemplate}"
Content="{TemplateBinding SelectedItem}" />
<ScrollBar Minimum="0"
Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=SelectedIndex,Mode=TwoWay}"
Maximum="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Items.Count,Converter={StaticResource ResourceKey=ToRealCount}}"
Grid.Column="1"
ViewportSize="0.5" />
</Grid>
</ControlTemplate>
</ListView.Template>
<ListView.Items>
<Rectangle Fill="Violet"
Width="100"
Height="100" />
<Rectangle Fill="Aqua"
Width="100"
Height="100" />
<Rectangle Fill="Green"
Width="100"
Height="100" />
<Rectangle Fill="Red"
Width="100"
Height="100" />
</ListView.Items>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListView>
Converter :
public class ToRealCount : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is int count)
{
return count > 0 ? count - 1 : count;
}
return 0;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
you might consider looking into this too flipview
I ended using a combobox instead of a list, because i dont want to use something hacky that could end doing weird things and flipview didnt work as intended so is actually the best.
As i have to wait anyway if someone gives a better solution would be very nice.
I have a Popup in a DataTemplate of a GridView.
The DataTemplate has 2 buttons which opens up this Popup. This works perfectly well. But I see some erratic behaviour when the GridView is scrolled.
Popup opened
When GridView is scrolled the popup stays on the page
XAML Code for the GridView ItemTemplate
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Popup x:Name="PagesPopup" IsOpen="{Binding IsPagesPopupOpen}">
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Popup>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
That's expected behavior. PopUp intentionally has a highest z-index to display over all other elements. An easy fix, would be to get rid of the PopUp all together, and move {Binding IsPagesPopupOpen} down to the Grid inside it and use it on that Grid's Visibility with a Visibility Converter instead. Except it would need to be moved to the bottom so it would display above the contents.
To Explain better. Instead of how you have it, do this;
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
<!-- We move it down here to ensure it appears over everything and without having to set a fixed z-index, and add your visibility converter -->
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"
Visibility="{Binding IsPagesPopupOpen, Converter={StaticResource BooleanToVisibilityConverter}}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Grid>
</DataTemplate>
I am having trouble aligning my items in my Gridview. I have a DataTemplate that has a Stackpanel within it. Inside of that Stackpanel I have 3 TextBlocks. I am unable to move those textblock where I want to in the Gridview. I will post my XAML below..
XAML
<Page.Resources>
<DataTemplate x:Key="TileTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding TitleView}" FontFamily="Segoe UI" FontWeight="SemiBold" FontSize="18" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10" />
<TextBlock Text="{Binding BodyView}" FontFamily="Segoe UI" FontWeight="Light" FontSize="14" Foreground="White" TextWrapping="Wrap" Margin="10,50" />
<TextBlock Text="{Binding AuthorView}" FontFamily="Segoe UI" FontWeight="Light" FontStyle="Italic" FontSize="10" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,10" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid x:Name="tileGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<GridView x:Name="tileGridView" Margin="12,60" ItemTemplate="{StaticResource TileTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="#2A2A2A"
Margin="5"
Height="200"
Width="300">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</GridView.ItemContainerStyle>
</GridView>
</Grid>
This is the result I am getting:
As you can see it is completely cutting out the Author and is not aligning my body correctly (via my inline styling of the textblock).
Does anyone know of a way I can manipulate the position of the textblocks in my GridView?
Set the Orientation of the StackPanel to be Vertical with a Left Horizontal Alignment and see if that gives you the desired look.
I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data
Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)