vertical scroll bar shifts contents horizontally - wpf

I an using a Scrollviewer with an ItemsControl in it.
the VerticalScrollBarVisibility of the Scrollviewer is set to "Auto".
the problem is that when the scrollbar appears it shifts the contents of the ItemsControl horizontally.
Is there a way that the scroll bar will just be "over" the contents with out moving them?
the code looks something like this
<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True" SnapsToDevicePixels="True">
<ItemsControl ItemsSource="{Binding Summaries}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" IsItemsHost="True" CanVerticallyScroll="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="15,5,10,5" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
<ColumnDefinition Width=".166*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Label Grid.Column="1" Content="{Binding A}" HorizontalContentAlignment="Center"/>
<Label Grid.Column="2" Content="{Binding B}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Grid.Column="3" Content="{Binding C}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Grid.Column="4" Content="{Binding D}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Grid.Column="5" Content="{Binding E}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl></ScrollViewer>
Thanks

here is a trick I used recently in my project:
ItemsControl.Width is obtained from ScrollViewer.ActualWidth via OneWay binding:
<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True"
Name="scroller"
SnapsToDevicePixels="True">
<ItemsControl ItemsSource="{Binding Summaries}"
Width="{Binding Path=ActualWidth, ElementName=scroller, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" IsItemsHost="True" CanVerticallyScroll="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<UniformGrid Columns="6" Margin="15,5,10,5" HorizontalAlignment="Stretch">
<Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Label Content="{Binding A}" HorizontalContentAlignment="Center"/>
<Label Content="{Binding B}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Content="{Binding C}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Content="{Binding D}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
<Label Content="{Binding E}" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"/>
</UniformGrid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
also consider using of UniformGrid

Related

Changing image width inside datatemplate dynamically with a slidercontrol

I have populated a Listview with Images and I want to change the size of the Images dynamically with a slider. I couldnt find any solution yet. How can I do that?
<ListView ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Width="{Binding ElementName=Windowdefault, Path=ActualWidth}" Margin="5" MouseDoubleClick="TvBox_MouseDoubleClick" x:Name="TvBox" VerticalAlignment="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Wrapalign:AlignableWrapPanel HorizontalContentAlignment="Center" HorizontalAlignment="Center" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="stack" Margin="0 0 0 0" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<StackPanel Margin="-25 -8 -25 -5">
<Image Width="100" x:Name="ImagesGrid" Source="{Binding ID,Converter={StaticResource ImagePathConverter}}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="UniformToFill" />
<TextBlock x:Name="ID" HorizontalAlignment="Center" FontWeight="Light" Text="{Binding ID}" VerticalAlignment="Bottom" />
</StackPanel>
<TextBlock Visibility="Collapsed" x:Name="Flname" MaxWidth="60" TextAlignment="Center" FontSize="7" TextWrapping="Wrap" HorizontalAlignment="Center" FontWeight="Light" Text="{Binding Name}" VerticalAlignment="Bottom" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
This is pretty simple to accomplish.
Using your code as a starting point, I added a Slider with the x:Name="Slider". In the DataTemplate I setup a binding on the Image to be the Value of the Slider.
The Slider has a Minimum="100" and Maximum="1000" for the example.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Slider x:Name="Slider"
Grid.Row="0"
Interval="1"
Maximum="1000"
Minimum="100"
Value="100" />
<ListView
Grid.Row="1"
Margin="5"
VerticalAlignment="Top"
ItemsSource="{Binding Images}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Orientation="Vertical">
<StackPanel>
<Image x:Name="ImagesGrid"
Width="{Binding ElementName=Slider, Path=Value}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Source="{Binding Image}"
Stretch="UniformToFill" />
<TextBlock x:Name="ID"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontWeight="Light"
Text="{Binding Name}" />
</StackPanel>
<TextBlock
MaxWidth="60"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontSize="7"
FontWeight="Light"
Text="{Binding FileName}"
TextAlignment="Center"
TextWrapping="Wrap"
Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I hope this helps!

ItemsControl layout with nested list - each wrapper under self

my goal is to put 3rd wrapper under the 2nd. For this layout I'm using mix of dockpanel + stackpanel.
1st wrapper is a stackpanel of label's
2nd wrapper is item control (list of members) with dockpanel as template
3rd wrapper is item control with dockpanel as template (nested list of addresses of each member)
View
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<Label Style="{StaticResource MinWidthLeft}" Content="Typ Adresu"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Imie"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Nazwisko"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Nazwa Firmy"/>
<Label Style="{StaticResource MinWidthLeft}" Content="NIP"/>
<Label Style="{StaticResource MinWidthLeft}" Content="REGON"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Ulica"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Adres"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Kod pocztowy"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Miasto"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Kraj"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Dodatkowe informacje"/>
</StackPanel>
<ItemsControl ItemsSource = "{Binding listContractorAddAddress}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<Button Style="{StaticResource MinWidth}" Content="Dodaj Adres" Command="{Binding Path=AddAddress}"/>
<TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Login}"/>
<TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Email}"/>
<ItemsControl ItemsSource = "{Binding Addresses}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<Button Style="{StaticResource MinWidth}" Content="Edytuj" Command="{Binding Path=EditAddress}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.TypAdresu}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Imie}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Nazwisko}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NazwaFirmy}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NIP}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.REGON}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Ulica}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Adres}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.KodPocztowy}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Miasto}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Kraj}"/>
<TextBlock Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.DodatkoweInformacje}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--<DockPanel/>-->
<StackPanel DockPanel.Dock="Top" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--<DockPanel/>-->
<StackPanel DockPanel.Dock="Top" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DockPanel>
</ScrollViewer>
</Grid>
I spent a lot of time on this, I tried to use:
only stackpanel with horizontal/vertical orientation (I made the
same layout as using dockpanel).
only grid, but this dosent work for me - disaster and waste of time
(it's hard for me to say what I was doing wrong, every row was the
right side and not one below the other)
Thanks!
I had to rebuild everything and reconsider the grid pattern:
<Grid IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Label Style="{StaticResource MinWidthLeft}" Content="Typ Adresu"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Imie"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Nazwisko"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Nazwa Firmy"/>
<Label Style="{StaticResource MinWidthLeft}" Content="NIP"/>
<Label Style="{StaticResource MinWidthLeft}" Content="REGON"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Ulica"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Adres"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Kod pocztowy"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Miasto"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Kraj"/>
<Label Style="{StaticResource MinWidthLeft}" Content="Dodatkowe informacje"/>
</StackPanel>
<ItemsControl Grid.Row="1" Grid.Column="0" ItemsSource="{Binding listContractorAddAddress}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Style="{StaticResource MinWidth}" Content="Dodaj Adres" Command="{Binding Path=AddAddress}"/>
<TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Login}"/>
<TextBlock Style="{StaticResource MinWidth}" Text="{Binding Member.Email}"/>
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Addresses}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Style="{StaticResource MinWidth}" Content="Edytuj" Command="{Binding Path=EditAddress}"/>
<TextBlock Grid.Column="1" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.TypAdresu}"/>
<TextBlock Grid.Column="2" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Imie}"/>
<TextBlock Grid.Column="3" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Nazwisko}"/>
<TextBlock Grid.Column="4" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NazwaFirmy}"/>
<TextBlock Grid.Column="5" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.NIP}"/>
<TextBlock Grid.Column="6" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.REGON}"/>
<TextBlock Grid.Column="7" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Ulica}"/>
<TextBlock Grid.Column="8" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Adres}"/>
<TextBlock Grid.Column="9" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.KodPocztowy}"/>
<TextBlock Grid.Column="10" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Miasto}"/>
<TextBlock Grid.Column="11" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.Kraj}"/>
<TextBlock Grid.Column="12" Style="{StaticResource MinWidthLeft}" Text="{Binding MemberAddress.DodatkoweInformacje}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Html + css is much more intuitive for me than xaml.
Uff that was crazy 5h :)
Foggy Finder thank you for your interesting.
this is a template that helped me solve the problem

Nested ItemsControl Orientation

I have a nested ItemsControl. My data structure is an ObservableCollection of Campaigns which consist of a Campaign class and an observableCollection of Data counts (total, assigned, unassigned, closed). What I need is the following:
CAMPAIGN.NAME
TOTAL UNASSIGNED ASSIGNED CLOSED
CAMPAIGN.NAME
TOTAL UNASSIGNED ASSIGNED CLOSED
I am able to get the first part of this, but for some reason it will not honor the orientation for the second ItemsControl. What am I missing? My XAML is:
<ItemsControl x:Name="icCampaignChicklets" ItemsSource="{Binding CampChicks}" Grid.Row="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="gridContent">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="CampaignHeader" Height="20" Text="{Binding Path=Campaign.Name}" Grid.Row="1" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left" />
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="10">
<ItemsControl x:Name="icChicklets" ItemsSource="{Binding Path=Data}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="150" Height="140" Background="{Binding Background}" Cursor="Hand"
MouseLeftButtonDown="Chicklet_MouseLeftButtonDown"
>
<Grid x:Name="gridContent" Margin="8,4">
<TextBlock Text="{Binding Caption}" Foreground="White" FontSize="17" />
<TextBlock Text="{Binding CountCaption, Mode=OneWay}" Foreground="White" FontSize="45" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="7" />
<TextBlock Text="Ú" Foreground="#99ffffff" FontSize="30" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="3,5" FontFamily="Wingdings 3" />
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If you want to change the orientation of the contents of an ItemsControl, set its ItemsPanel property like so:
<ItemsControl
...attributes...
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Wrapping it in a horizontally-oriented parent StackPanel will merely arrange it and its siblings horizontally, but in this particular case it has no siblings.

WPF Popup Panel take needed space

I'm having an issue making a popup notification panel take only the amount of space it's inner controls require.
What I've Got:
<Grid>
<DockPanel Panel.ZIndex="1111" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Visibility="{Binding MessageVisibility}">
<Button Visibility="Collapsed" Name="clickButton" Command="{Binding Path=CloseMessage}"/>
<Border Background="LightGray" CornerRadius="20" MouseDown="Border_MouseDown" BorderThickness="8" BorderBrush="CadetBlue">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20px">
<ItemsControl Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Messages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock TextBlock.TextAlignment="Center" Text="{Binding FallbackValue='Message'}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Border>
</DockPanel>
<DockPanel Panel.ZIndex="0">
...
</DockPanel>
</Grid>
I'm trying to make the first DockPanel only take up the space required by the ItemsControl. It seems to be taking the whole space. Setting a Width/Heigh will keep it in the center but it will not let it grow.
Changing from DockPanel to Stackpanel and setting Hor/Vert alignment center worked.
The below modified code might be helpful and solve your pro
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitions/>
</Grid.ColumnDefinitions>
<DockPanel Panel.ZIndex="1111" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Visibility="{Binding MessageVisibility}">
<Button Visibility="Collapsed" Name="clickButton" Command="{Binding Path=CloseMessage}"/>
<Border Background="LightGray" CornerRadius="20" MouseDown="Border_MouseDown" BorderThickness="8" BorderBrush="CadetBlue">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20px">
<ItemsControl Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Messages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock TextBlock.TextAlignment="Center" Text="{Binding FallbackValue='Message'}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Border>
</DockPanel>
<DockPanel Panel.ZIndex="0" Grid.Column="0" Grid.Row="1">
...
</DockPanel>
</Grid>

Button alignment problem in listbox in WPF

I have a listbox containing itemtemplate like this
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold" />
<TextBlock Text="{Binding [1]}"></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
</Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1" HorizontalAlignment="Right"></Button>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This listbox is in first column of a grid which has a splitter.
Now problem is that I am not able to align the button to right side of listbox item.
One Grid is enough here. You only need one star-sized column (for content) and one Auto-sized column (for the button):
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold"/>
<TextBlock Text="{Binding [1]}" ></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1"></Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Resources