Please help me to edit XAML so the TextBlock which shows minutes goes to the right top corner.
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" >
<TextBlock Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >#</TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
</StackPanel>
</StackPanel>
So it should be like
I would use a DockPanel. For the child nodes, just add DockPanel.Dock attributes to indicate where you want the element to go. The last child element will automatically fill the remaining area.
<DockPanel>
<TextBlock DockPanel.Dock="Right" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
<StackPanel Orientation="Horizontal" >
<TextBlock Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >#</TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
</StackPanel>
</DockPanel>
If I were doing this I would use a grid rather than a horizontal stack panel:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >#</TextBlock>
<TextBlock Grid.Column="2" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
<TextBlock Grid.Column="4" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
</Grid>
Note the * in the column 3 which means that column will use all available space after column 2, except for what is needed by column 4.
Don't use a StackPanel but a Grid with columns?
Related
I have a ListView with few TextBlocks in it. I would like to align those textblocks to get columns, but the problem is that content can have different length.
Is there any way to set the length of each text block, and if the value is shorter, to add spaces?
<ListView x:Name="InfoBird_ListView" IsItemClickEnabled="False" IsHitTestVisible="False">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:SelectedBirdData">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding dataId}" Margin = "0,0,0,0" FontSize="16" />
<TextBlock Text=":" Margin = "0" FontSize="16" />
<TextBlock Text="{Binding latitude}" Margin = "10,0,0,0" FontSize="16" />
<TextBlock Text="{Binding longitude}" Margin = "10,0,0,0" FontSize="16" />
<TextBlock Text="{Binding altitude}" Margin = "10,0,0,0" FontSize="16" />
<TextBlock Text="{Binding timeStamp}" Margin = "10,0,0,0" FontSize="16" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
There are two ways to go about this,
Set a constant Width for all the Textbox's such that they all fit the data.
Use a Grid and Grid.ColumnDefinitions to create a tabular structure such that you can fit the data into columns. Below is the updated `DataTemplate:
<Grid Margin="5,40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="21*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="87*"/>
<ColumnDefinition Width="75*"/>
<ColumnDefinition Width="1224*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding dataId}" Margin = "0,0,0,0" FontSize="16" Grid.Column="0"/>
<TextBlock Text=":" Margin = "0" FontSize="16" Grid.Column="1"/>
<TextBlock Text="{Binding latitude}" Margin = "10,0,0,0" FontSize="16" Grid.Column="2"/>
<TextBlock Text="{Binding longitude}" Margin = "10,0,0,0" FontSize="16" Grid.Column="3"/>
<TextBlock Text="{Binding altitude}" Margin="10,0,0,0" FontSize="16" Grid.Column="4"/>
<TextBlock Text="{Binding timeStamp}" Margin = "10,0,0,0" FontSize="16" Grid.Column="5"/>
</Grid>
The 2nd approach is more adaptive to dynamic Window Sizes
In edit mode, my textBlocks appear as I want. But when I run the code, the textBlock4 is cropped ! I would like to know why and how to correct this, thank you.
XAML :
<Window x:Class="CuttedControlAfterCompilation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CuttedControlAfterCompilation"
mc:Ignorable="d"
Title="Cutted Control After Compilation" Height="350" Width="525">
<Grid>
<StackPanel Orientation="Horizontal" Margin="0,50">
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="73" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
</StackPanel>
</Grid>
</Window>
Images :
textBlock4 with its full width in edit mode
textBlock4 with its width trimmed after execution
If you add WindowStyle="None" to your window you the textblock will no longer be cut. See Window.WindowStyle Property. I believe the reason is the window border is using some of the width
Alternatively set SizeToContent="WidthAndHeight" and you will be set. See Window.SizeToContent Property
So the code would be
<Window x:Class="CuttedControlAfterCompilation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CuttedControlAfterCompilation"
mc:Ignorable="d"
Title="Cutted Control After Compilation"
SizeToContent="WidthAndHeight">
<Grid>
<StackPanel Orientation="Horizontal" Margin="0,50">
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="73" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
</StackPanel>
</Grid>
In some cases I had trouble using the SizeToContent property. But after several manipulations, I understand and use it much better now.
Troubles
Trouble with a Grid
<Grid Margin="0,50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="75*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Grid.Column="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Grid.Column="2" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Grid.Column="3" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
</Grid>
Image : The SizeToContent property narrows the dimensions of the Grid.
Trouble with a StackPanel
<StackPanel Orientation="Horizontal" Margin="0,50">
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="75" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
</StackPanel>
Image : The SizeToContent property narrows the height of the StackPanel.
Corrections
For the Grid
Possibility 1 : Specify the Width and Height of the Grid (Do not leave them in Auto.).
<Grid Width="519" Height="221" Margin="0,50">
Possibility 2 : Set the value of the row in Pixel, as well as the value of each column.
<Grid.RowDefinitions>
<RowDefinition Height="221"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148"/>
<ColumnDefinition Width="148"/>
<ColumnDefinition Width="148"/>
<ColumnDefinition Width="75"/>
</Grid.ColumnDefinitions>
Possibility 3 : Specify the Width and Height of each TextBlock (Do not leave them in Auto.).
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" Height="221" Grid.Column="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" Height="221" Grid.Column="2" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="75" Height="221" Grid.Column="3" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
Possibility 4 : Set the values of the MinWidth and MinHeight to the Width and Height (which are in Auto in this case) of the Grid.
<Grid Margin="0,50" MinWidth="519" MinHeight="221">
For the StackPanel
Possibility 1 : Specify the Height of the StackPanel (Do not leave it in Auto.).
<StackPanel Height="221" Orientation="Horizontal" Margin="0,50">
Possibility 2 : Specify the Height of each TextBlock (Do not leave it in Auto.).
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="75" Height="221" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
Possibility 3 : Set the value of the MinHeight to the Height (which is in Auto in this case) of the StackPanel.
<StackPanel Orientation="Horizontal" Margin="0,50" MinHeight="221">
Conclusion
It appears that the SizeToContent property ignores spaces that are not used in controls when the dimensions are floating (Star or Auto). This can be remedied by specifying the dimensions of the control that the Window contains or those of its children.
So, to take the XAML code from the question, it may be corrected by setting the Grid MinHeight to 319 and setting the SizeToContent = "WidthAndHeight" property to the Window.
<Window x:Class="CuttedControlAfterCompilation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CuttedControlAfterCompilation"
mc:Ignorable="d"
Title="Cutted Control After Compilation" SizeToContent = "WidthAndHeight">
<Grid MinHeight="319">
<StackPanel Orientation="Horizontal" Margin="0,50">
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="73" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
</StackPanel>
</Grid>
</Window>
I thank #PouyaAbadi very much for his contribution.
This is a standard window issue. You rely on calculated width values, but they gat messed by ThreeD window border sizes. You can make a window wider as Pouya Abadi mentioned, that would be perfect for this case. But it is not a good solution IMHO.
WPF is all about layout. I'd use DockPanel to make contols take up all the space available, or Grid Columns (1*,1*,1*,.75*) sizes. I'm not sure what you are going to make out of this.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width=".75*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" FontSize="48" FontWeight="Bold" TextAlignment="Center" Grid.Column="1"/>
<TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" FontSize="48" FontWeight="Bold" TextAlignment="Center" Grid.Column="2"/>
<TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" FontSize="112" FontWeight="Bold" TextAlignment="Center" Grid.Column="3"/>
</Grid>
I personally don't like standard window and I use a custom one ModernUI.WPF by First Floor Software + my window style, that cleans up that modern madness and gives me full control on how it looks.
Why don't you just increase the width of the window?
<Window ... Title="Cutted Control After Compilation" Height="350" Width="533">
The other option would, as mentioned, be to set the SizeToContent property of the window to WidthAndHeight or just Width:
<Window ... SizeToContent="WidthAndHeight">
This should be a simple fix.
I populate a textblock with data from Service and I bind the data to Listbox and then display it in textblocks, so far so good. My problem is that I want each textblock content to be placed in certain space in certain column, but this doesn't seem to work as my text is just put in each line and is not alligned as it should be.
here is my code:
<Grid x:Name="BranchesGrid" Margin="12,0,-12,6" Grid.Row="2" Height="542" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<ListBox Height="530" HorizontalAlignment="Left" Margin="12,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="456" Grid.ColumnSpan="4">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ID}" FontSize="20" Grid.Column="0" Padding="55,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Name}" FontSize="20" Grid.Column="1" Padding="110,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding City}" FontSize="20" Grid.Column="2" Padding="70,10,5,10" HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Where seems to be the problem?
Try this:
<Grid x:Name="BranchesGrid" Margin="12,0,-12,6" Grid.Row="2" Height="542" VerticalAlignment="Bottom">
<ListBox Height="530" HorizontalAlignment="Left" Margin="12,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="456" Grid.ColumnSpan="4">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ID}" FontSize="20" Grid.Column="0" Padding="55,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Name}" FontSize="20" Grid.Column="1" Padding="110,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding City}" FontSize="20" Grid.Column="2" Padding="70,10,5,10" HorizontalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I have a content control that doesn't show the binding data only the static texts:
<ContentControl Name="Detail" Grid.Row="3" Grid.ColumnSpan="3"
ContentTemplate="{StaticResource detailsAdListingTemplate}"
Margin="9,0,0,0"/>
<DataTemplate x:Key="detailsAdListingTemplate" >
<Grid Margin="5,5,5,10">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="113"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="0,0,8,0"
Name="title"
Style="{StaticResource smallTitleStyle}">Title:</TextBlock>
<TextBlock Name="DescriptionDTKey" Grid.Row="0" Grid.Column="1"
Text="{Binding Path=Title}"
Style="{StaticResource textStyleTextBlock}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Margin="0,0,8,0"
Name="price"
Style="{StaticResource smallTitleStyle}">Price:</TextBlock>
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
<TextBlock Text="$" Style="{StaticResource textStyleTextBlock}"/>
<TextBlock Name="PriceDTKey"
Text="{Binding Path=Price}"
Style="{StaticResource textStyleTextBlock}"/>
</StackPanel>
<TextBlock Grid.Row="2" Grid.Column="0" Margin="0,0,8,0"
Name="date"
Style="{StaticResource smallTitleStyle}">Date:</TextBlock>
<TextBlock Name="DateDTKey" Grid.Row="2" Grid.Column="1"
Text="{Binding Path=Date}"
Style="{StaticResource textStyleTextBlock}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Margin="0,0,8,0"
Name="subCategory"
Style="{StaticResource smallTitleStyle}">Subcategory: </TextBlock>
<TextBlock Name="SubCategoryDTKey" Grid.Row="3" Grid.Column="1"
Text="{Binding Path=SubCategory.Name}"
Style="{StaticResource textStyleTextBlock}"/>
<TextBlock Grid.Row="4" Grid.Column="0" Margin="0,0,8,0"
Name="owner"
Style="{StaticResource smallTitleStyle}">Owner:</TextBlock>
<TextBlock Name="OwnerDTKey" Grid.Row="4" Grid.Column="1"
Text="{Binding Path=User.Username}"
Style="{StaticResource textStyleTextBlock}"/>
<TextBlock Grid.Row="5" Grid.Column="0" Margin="0,0,8,0"
Name="location"
Style="{StaticResource smallTitleStyle}">Location: </TextBlock>
<TextBlock Name="locationDTKey" Grid.Row="5" Grid.Column="1"
Text="{Binding Path=Location}"
Style="{StaticResource textStyleTextBlock}"/>
<TextBlock Grid.Row="6" Grid.Column="0" Margin="0,0,8,0"
Name="Body"
Style="{StaticResource smallTitleStyle}">Body:</TextBlock>
<TextBlock Name="BodyDTKey" Grid.Row="6" Grid.Column="1"
Text="{Binding Path=Body}"
Style="{StaticResource textStyleTextBlock}"/>
</Grid>
</DataTemplate>
I set the Detail.DataContext=ad; (where ad is a proper Ad object that has all the data and all the properties in the {Binding Path=Property}.
IT USED TO WORK FINE. I don't remember editing it. I don't know what I did to the application but now the data template
only shows the static texts - for example Title: but no actual title.So only the bindings don't work.
I'm sure there is nothing wrong with the xaml code above and it should work.
Is there an "external" other source that may be causing this problem?
ContentTemplate is the template used to display ContentControl.Content, which you are leaving as null
Either set Detail.Content = ad; (instead of Detail.DataContext), or bind your ContentControl.Content property to the current DataContext.
<ContentControl Name="Detail" Grid.Row="3" Grid.ColumnSpan="3" Margin="9,0,0,0"
Content="{Binding }"
ContentTemplate="{StaticResource detailsAdListingTemplate}" />
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>