Horizontally Positioning Controls inside ListBox - xaml

I am making a UWP app and trying to place two TextBlock inside a ListBoxItem. HorizontalAlignment property doesn't seem to work.
I am trying to align the first TextBlock to the left and the second TextBlock to the right. Currently I am trying using Grids. Here's my XAML:
<Pivot.ItemTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding List}"
SelectionMode="Multiple"
ScrollViewer.HorizontalScrollMode="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding read}"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Text="{Binding num}"
Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</Pivot.ItemTemplate>

A couple of things you need to do here:
First, you need to stretch the alignment of the ListBoxItem, not the ListBox itself.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Second, you should change Width="1*" to Width="Auto" otherwise the num TextBlock might get truncated. Then you can remove Width="9*" and add TextWrapping="Wrap" to the read TextBlock so if text will go to the next line if it's too long. You can safely remove HorizontalAlignment="Left" too.

Try to set the HorizontalContentAlignment property to stretch in the ListBox:
<ListBox ItemsSource="{Binding List}"
HorizontalContentAlignment="Stretch"
SelectionMode="Multiple"
ScrollViewer.HorizontalScrollMode="Disabled">
By default the HorizontalContentAlignment is set to left, and your listItem will not stretch to use all the available space, and that's why it's content will not be alligned properly to the right.

Related

UWP XAML Binding to another object is not working

I'm trying to bind TextBlock Width to another object's Width.
It is not working, TextBlock Width stays as the Text length, and not as "BitsListView" Width.
An interesting thing is, when I edit the "Width" of TextBlock while debugging, the binding is working OK.
<StackPanel >
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{x:Bind name}" Width="{Binding ElementName=BitsListView, Path=ActualWidth }"/>
</StackPanel>
<ListBox x:Name="BitsListView" ItemsSource="{x:Bind BitsList, Mode=TwoWay}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</StackPanel>
Any ideas?
UWP XAML Binding to another object is not working
The problem is that when set TextBlock root panel Orientation property as Horizontal, the width of content will be fixed. So, if you want to make Binding work, please remove Orientation property like the following.
<StackPanel>
<Border BorderBrush="Red" BorderThickness="2" HorizontalAlignment="Stretch" Margin="0,0,0,0">
<TextBlock Name="TestBlock" Text="Test input some" Width="{Binding ElementName=BitsListView, Path=ActualWidth}"/>
</Border>
</StackPanel>

How to get a UWP DataTemplate to use the sizing of it's ListView?

In the example below, the ListView control understands the width of it's parent container RelativePanel. When looking a the layout in the designer, it is clear that the ListView is filling out to the full width of the RelativePanel. However, even though the RelativePanel inside the DataTemplate is also asking to fill out the width of the parent, it ignores the "align left" and "align right". I can't seem to find any way to get it to recognize it's parent container's size.
Any suggestions here would be appreciated.
<RelativePanel RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<ListView Name="LstOrders" ItemsSource="{x:Bind Vm.OrdersList, Mode=OneWay}"
SelectionMode="None"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,5,0,0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="genericOrder:OrderThumbnailVm">
<RelativePanel Name="PanelThumbnail" Margin="0,0,20,0">
<RelativePanel Name="PanelOrderDetails"
Background="BlueViolet"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<TextBlock Text="{x:Bind Name}" Margin="8,0,0,0" VerticalAlignment="Center"
Foreground="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource DeletedColor}}"
TextWrapping="WrapWholeWords"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.LeftOf="BtnDeleteRestore"/>
<Button Name="BtnDeleteRestore"
Content="{x:Bind DisplayDelete, Mode=OneWay}"
Click="{x:Bind DeleteOrder}"
RelativePanel.AlignRightWithPanel="True"
FontSize="10"
Height="20"
Padding="0"
Visibility="{x:Bind ShowDeleteButton, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
</RelativePanel>
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativePanel>
That is because the value of HorizontalContentAlignmentof ListViewItem is Left, we need to override it and make it Stretch. You can find it in the ListViewItem styles and templates.
To solve this problem, as I said, we need to override its style, for example like this:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<RelativePanel>
...
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

StackPanel not scrolling in Windows Phone 8.1

I am building a Custom Control for Windows Phone 8.1. But the stackpanel is not scrolling down. StackPanel contains one ListView which shouws a TextBlock & another StackPanel which houses a Toggle Button.
<StackPanel Orientation="Vertical" >
<ListView Grid.Row="0" Background="RoyalBlue">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="Some Text" Foreground="Black" FontSize="20" TextAlignment="Center" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Row="2" HorizontalAlignment="Stretch" Background="Red" Orientation="Horizontal">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0" Content="Toggle Me" />
</Grid>
</StackPanel>
</StackPanel>
Stackpanel doesn't provide any scrolling.
You can wrap it into a ScrollViewer.
Also: listView already provides Scrolling.
But: The ListView inside stackpanel will pick up all your manipulation events. Also, a ListView inside a Stackpanel will have infinite heigt and therefore loose it's virtualization capabilities.
If you just want to have content above and/below the ListView, maybe use its Header/Footer properties.
Add ScrollViewer over the StackPanel and it will make it scrollable.
For Example:
<ScrollViewer Margin="12">
<StackPanel>
<TextBlock Text="content1" FontSize="48" />
<TextBlock Text="content1" FontSize="48" />
</StackPanel>
</ScrollViewer>

Control not resizing with the gridsplitter

I have a dock panel to the left of my screen which contains a listbox. The listbox is populated with custom items, defined in another class. To the right of my listbox i have a gridsplitter.
When i click and drag my gridsplitter, the listbox gets resized as expected, howvever the items inside do not.
I would like the items inside to resize accordingly so i can use textrimming when the control would be cut off.
I currently have:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" MaxWidth="500" MinWidth="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<toolkit:DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,9,0">
<Button toolkit:DockPanel.Dock="Top" Height="30" Content="Create" Visibility="{Binding Path=IsVisible, Mode=TwoWay}" Command="{Binding Path=Create, Mode=TwoWay}" />
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
<ListBox HorizontalAlignment="Stretch" ItemContainerStyle="{StaticResource ItemContainerStyle}" ItemsSource="{Binding Path=ViewModel, Mode=TwoWay}" SelectedItem="{Binding Path=Selected, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<ContentControl HorizontalAlignment="Stretch">
<myNamespace:MycustomControl HorizontalAlignment="Stretch" DataContext="{Binding}" Height="40"/>
</ContentControl>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</toolkit:DockPanel>
<sdk:GridSplitter Width="10" HorizontalAlignment="Right" Grid.Row="1" Style="{StaticResource VerticalGridSplitterStyle}" />
Also within my custom item class, everything is defined HorizontalAlignment = Stretch and has no fixed width set.
Edit: Also i have tried binding my custom item's width to my listbox width with no luck.
It turned out that the horizontal scroll bar was causing the issue (even though it wasn't visible)
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Solved my issue

How to remove "focused" border from XAML listbox?

This problem is about the listbox itself and not it's cells. If I put listbox into a viewbox, and click on an item, the whole listbox will be surrounded with a 1px border. I do not want that, because it is ugly. How to remove this border?
Details:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Viewbox Grid.Row="1" Stretch="Uniform">
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<Grid Width="200">
<ListBox ItemsSource="{Binding Rajzelemek}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentControl Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Content="{Binding Ikonja}" Width="25" Height="25" VerticalAlignment="Center" />
<TextBlock Text="{Binding}" VerticalAlignment="Center" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</StackPanel>
</Viewbox>
</Grid>
If I comment the <Viewbox Grid.Row.... part, everything is fine, but not scaled. I want stuff to get scaled, well that is why I use the viewbox, but I do not want this border:
The code above was put on a metro BlankPage1 too, and made the same thing.
I think you're looking for what's in the ListBoxItem template wherein there's a Rectangle acting as a Focus Visual, if you check out the default template you'll see it with a default brush attributed to it (FocusVisualWhiteStrokeThemeBrush) which you could either change in the template, or provide your own resource for it to find before it hits the default dictionaries like;
<SolidColorBrush x:Key="FocusVisualWhiteStrokeThemeBrush" Color="Transparent" />
Hope this helps.
EDIT
Sorry I was going by the picture you have, thought it was the item. In any case since your ViewBox is the culprit you just need to interact with the Border control within it >like you showed in a previous post of your own< where you're the one making that border. Something like;
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
...
</ViewBox>