Binding not working on GroupBox.HeaderTemplate - c#

I created a custom header for my GroupBox like the following image:
I want also to set a Binding on the Backgroud of this header, so I wrote the following code:
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
After execution, I the GroupBox's Background is colord in the right way, but not the header !
Is anyone able to explain to me why it's not working well ?


you can use like that ;
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.Header>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</GroupBox.Header>
<!--<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>-->
</GroupBox>


Solution Found !
I had to make an internal binding in the Xaml, between the backgroud of the GroupBox and it's header. Like the followiing code:
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HubColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=Background}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
The result is:


You can use this binding without element name
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20" Background="{Binding Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>


You can rely on your VM data instead of control properties
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
DataSource="{Binding VMObject}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=DataSource.HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>

Related

Is there any way to show elements from a listview one by one and scroll through them?

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.

How to create expandable(dropdown) table in xaml?

I am working on a project which displays a table. I am using a grid to present the table. Now, I want to add "+" button next to each row. This "+" button click will display a subtable under that row. This is a part of code without that feature implemented:
<Grid Name="ContentName" Grid.Row="1" Background="#FFFBFBFB" Margin="10,10,10,10" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<Grid.Effect>
<DropShadowEffect BlurRadius="20" Color="#FF858585" RenderingBias="Quality" ShadowDepth="1"/>
</Grid.Effect>
<Grid Name ="Tables" Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"></ColumnDefinition>
<ColumnDefinition Width="120"></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,1" />
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
Expand each section to answer <LineBreak/>
each Risk Attribute Statement <LineBreak/>
[i.e. activity, service or product]
</TextBlock>
<Border Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="0,1,1,1" />
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
Category Inherent <LineBreak/>
Risk
</TextBlock>
<Border Grid.Row="0" Grid.Column="2" Background="Coral"/>
<TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center">
Select <LineBreak/>
Risk <LineBreak/>
Level
</TextBlock>
<Border Grid.Row="0" Grid.Column="3" Background="#FFDCE6F1" />
<TextBlock Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center">
Least(1)
</TextBlock>
<Border Grid.Row="0" Grid.Column="4" Background="#FFB8CCE4" />
<TextBlock Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center">
Minimal(2)
</TextBlock>
<Border Grid.Row="0" Grid.Column="5" Background="#FF95B3D7" />
<TextBlock Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center">
Moderate(3)
</TextBlock>
<Border Grid.Row="0" Grid.Column="6" Background="#FF366092" />
<TextBlock Grid.Row="0" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">
Significant(4)
</TextBlock>
<Border Grid.Row="0" Grid.Column="7" Background="#FF244062" />
<TextBlock Grid.Row="0" Grid.Column="7" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">
Most(5)
</TextBlock>
<Border Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 1:
Technologies and <LineBreak/>
Connection Types
</TextBlock>
<Border Grid.Row="2" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 2:
Delivery Channels
</TextBlock>
<Border Grid.Row="3" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin ="10,0,0,0">
Category 3: <LineBreak/>
Online/Mobile Products <LineBreak/>
and Technology Services
</TextBlock>
<Border Grid.Row="4" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 4: <LineBreak/>
Organizational Characteristics
</TextBlock>
<Border Grid.Row="5" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 5: External Threats
</TextBlock>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Expander Grid.Row="6" Grid.Column="0" Header="More Options">
<StackPanel Margin="10,4,0,0">
<ScrollBar Orientation="Vertical"
Minimum="1" Maximum="100"
Value="10"
/>
<CheckBox Margin="4" Content="Option 1" />
<CheckBox Margin="4" Content="Option 2" />
<CheckBox Margin="4" Content="Option 3" />
</StackPanel>
</Expander>
</Grid>
</Grid>
The output is:
Screenshot
How can I implement this feature? Is there a preferable way to display a table?

Insert an inline image within a WPF TextBlock

I have below WPF TextBlock within a border:
<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<TextBlock x:Name="lblStoryboard"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Style="{StaticResource BlinkingTextBlock}"
Text="Hi there!"
TextWrapping="WrapWithOverflow"
Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}">
</TextBlock>
</Border>
Now I am trying to insert an inline image in front of the Textblock text, I mean, to the left (left side) of the TextBlock text and in the same line. How can I do this?

Add Stackpanel with Horizontal Orientation.
I have removed the binding since it as nothing to do with Adding image.
<Border BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<StackPanel Orientation="Horizontal" Margin="0,0,0,-1">
<Image Source="C:\Users\Administrator\source\repos\WpfApp4\WpfApp4\Koala.jpg" Margin="0,459,0,0" />
<TextBlock x:Name="lblStoryboard"
HorizontalAlignment="Center"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Text="Hi there!"
TextWrapping="WrapWithOverflow" Margin="0,459,0,0"
/>
</StackPanel>
</Border>

What panels and containers allow Overlapping of UI elements

What are the panels and containers that allow overlapping with varying z-index ? (escluding Canvas)
--Since I was asked for details this is part of the code:
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />

Ok I was able to do this with Clemens support:
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
--Answering to another question my XAML for whole control looks like this:
<ItemsControl ItemsSource="{Binding (local:MainWindow.CurrentPaletteSet)}" Width="400" Margin="665,67,14,-67">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullRgbString)}"
Margin="5,0,0,0" Height="16"
HorizontalAlignment="Left" DockPanel.Dock="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullHslString)}"
Margin="5,0,0,0"
Height="16" HorizontalAlignment="Left" DockPanel.Dock="Top" MinWidth="121" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel></ItemsControl>

how to place a horizontal line after each item in listbox

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 ;)

Categories