In my WPF application I have a DataGrid with multiple DataGridTemplateColumns. One of the columns looks like this:
<DataGridTemplateColumn Header="Column" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding SomeSource}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Margin="5"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Green" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="6" BorderThickness="2">
<StackPanel Background="Green" Width="200" Height="150">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" FontSize="17" FontWeight="Bold" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
This produces the following output:
As you can see the TextBlock which displays the Title is not vertically centered inside the green StackPanel. How can I do that?
StackPanel doesn't have a concept of its height, so you can't vertically-align its children. You'll have to do something a bit differently.
For example, move the fixed 150-height and background from the StackPanel to its parent border -- that way, you can vertically-align the StackPanel within the Border:
<Border Background="Green" Height="150" BorderBrush="Green" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="6" BorderThickness="2">
<StackPanel Width="200" VerticalAlignment="Center">
<TextBlock Text="{Binding}" HorizontalAlignment="Center" FontSize="17" FontWeight="Bold" />
</StackPanel>
</Border>
(It's not really clear why you're using that inner StackPanel since it only has one child, but I've assumed you're going to add something else to it.)
Related
I have the following XAML code:
<StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2">
<ScrollViewer Margin="30,30,0,30" Height="444">
<ItemsControl Name="ListCountries">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Width="100">
<TextBlock Text="{Binding Key}" Foreground="Red" />
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10,0,0">
<TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" />
<TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I set the itemSource of the itemsControl named ListCountries, with a IEnumerable> and it prints a list of titles, followed by a list of objects of the OtherClass.
My problem is that , the columns that are filled sometimes are bigger than the height of the Stackpanel that they are inserted to, i want to be able to split my inner list of into columns.
as you can see in the image, Belgium country gets splited into 2 columns
right now all my countries are single column with vertical scroll.
You should use a GridView for this. Here's some code slightly modified from a Grid app in Visual Studio
<GridView
x:Name="itemGridView"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
Height="600">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200">
<TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Here's a screenshot of what this looks like, with sample data
I have wrote some class, named as Employe. Employees collection I set as source for ListBox WPF control. I have wrote such template for ItemTemplate:
<ResourceDictionary>
<DataTemplate x:Key="tmpEmploye">
<Border BorderThickness="3" BorderBrush="Gray" CornerRadius="5"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Surname}"
HorizontalAlignment="Stretch" Margin="2"
FontWeight="Bold" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Path=Name}"
HorizontalAlignment="Stretch" Margin="2"/>
<TextBlock Text="{Binding Path=Patronymic}"
HorizontalAlignment="Stretch" Margin="2"
TextWrapping="Wrap"/>
</StackPanel>
<TextBlock Text="{Binding Path=Post}" Foreground="Gray"
HorizontalAlignment="Stretch" Margin="2"
FontStyle="Italic" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</DataTemplate>
</ResourceDictionary>
Each item has border. The border must be expanded according width of ListBox. I set HorizontalAlignment="Stretch" for Border, but it is not occured as I want.
How can I correct it?
Try this:
<ListBox Name="lbEmployees" ItemTemplate="{StaticResource tmpEmploye}"
HorizontalContentAlignment="Stretch"
/>
I have a DataTemplate for my ListBox and want to wrap a TextBlock, so the message will be displayed in the next line... So I've written this code:
<ListBox x:Name="CareListBox" ItemsSource="{Binding}" Grid.Column="1" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="pic.png" />
<TextBlock Text="{Binding Message}" Style="{StaticResource SubheaderTextStyle}" Margin="25,0,0,0" HorizontalAlignment="Stretch" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What am I doing wrong?
I would use a Grid with two columns rather than a horizontal StackPanel as the StackPanel won't have a width constraint.
I have almost tried everything but for some reason it is not working
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,30,5,10">
<TextBlock Text="View Options" FontSize="25" Style="{StaticResource PhoneTextNormalStyle}"/>
<ListBox HorizontalContentAlignment="Stretch" Background="Red" ItemsSource="{Binding Path=ViewOptions}" Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding}" FontSize="35" Margin="20" Style="{StaticResource PhoneTextNormalStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
Above XAML give me
How to move the textblock to center of listboxitem?
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,30,5,10">
<TextBlock Text="View Options" FontSize="25" Style="{StaticResource PhoneTextNormalStyle}"/>
<ListBox x:Name="listBox" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=ViewOptions}" Margin="10,30,10,10">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding}" FontSize="35" Margin="20" Style="{StaticResource PhoneTextNormalStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
You need to change the HorizontalContentAlignment to center
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,30,5,10">
<TextBlock Text="View Options" FontSize="25" Style="{StaticResource PhoneTextNormalStyle}"/>
<ListBox HorizontalContentAlignment="Center" Background="Red" ItemsSource="{Binding Path=ViewOptions}" Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding}" FontSize="35" Margin="20" Style="{StaticResource PhoneTextNormalStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I just tried this and it worked. Two possible differences:
My data source was a simple List<string>.
I removed the references to your styles (i.e. PhoneTextNormalStyle).
Are you binding to simple data?
Does PhoneTextNormalStyle specify left-alignment?
I have a listbox that's binded to data, each item that's in the listbox i would like to have rounded corners. I've used a border tag, but it doesn't seem to be having any effect.
Here's the code i'm using;
<ListBox Name="lstbMenu" Margin="0,190,6,6" Height="488">
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="10">
<StackPanel Orientation="Horizontal" Margin="10" Background="Beige" Width="488">
<StackPanel Orientation="Vertical">
<Image Source="Images/1_0_1_1B59_7DA_2_11A0000_0_0_0.png" VerticalAlignment="Center" Height="80" Width="80" Margin="10"/>
</StackPanel>
<TextBlock Text="{Binding Path=menuText}" VerticalAlignment="Center" Margin="10" FontSize="20" />
<TextBlock Text="{Binding Path=menuPage}" Visibility="Collapsed" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Does anyone have any idea's?
Thanks
By default a Border has a transparent background and a border thickness of 0. You need to set the Background, BorderBrush and BorderThickness properties of the Border.
This is your code bellow with the border's thickness set to 4 and the brush set to white, by setting the background property you can select a color or add an image as well:
<ListBox Name="lstbMenu" Margin="0,190,6,6" Height="488">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="4" BorderBrush="White" CornerRadius="10">
<StackPanel Orientation="Horizontal" Margin="10" Background="Beige" Width="488">
<StackPanel Orientation="Vertical">
<Image Source="Images/1_0_1_1B59_7DA_2_11A0000_0_0_0.png" VerticalAlignment="Center" Height="80" Width="80" Margin="10"/>
</StackPanel>
<TextBlock Text="{Binding Path=menuText}" VerticalAlignment="Center" Margin="10" FontSize="20" />
<TextBlock Text="{Binding Path=menuPage}" Visibility="Collapsed" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>