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>
Related
I would like to have a layout like Netflix when showing the movie posters:
Category
Poster1 Poster2 Poster3
Category 2
Poster1 Poster2 Poster3
I came up with this:
<ItemsControl Name="dataControl" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Width="100" Height="50" FontSize="14" Text="{Binding Key}"></TextBlock>
<ItemsControl Name="dataControl" ItemsSource="{Binding Value}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding MovieName}" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It's bound to a Dictionary that's why you have Key and Value as bindings for the controls. Sadly, the end result is this:
Note that the "movie posters" instead of being aligned horizontally, they are aligned vertically.
It seems to create a stack of one item per "row", but I don't know how to tell it to create a one horizontal stack for all the related items.
This is the source:
Dictionary<string, List<Movie>> Source;
And this is the Movie class:
public class Movie
{
public string MovieName { get; set; }
}
And the control is binded this way:
dataControl.ItemsSource = Source;
To align the "movie posters" horizontally, you need to change the ItemsPanel like the following.
<ItemsControl Name="dataControl" ItemsSource="{Binding Value}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding MovieName}" Width="100" Height="100"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
ItemsPanel is used to defines the panel to use for the layout of the items. The default value for the ItemsControl is an ItemsPanelTemplate that specifies a StackPanel. And for StackPanel, it's Orientation is set to Vertical by default. That's why your items are aligned vertically.
The StackPanel under DataTemplate controls the layout inside each item, not the layout of items inside ItemsControl. So setting its Orientation to Horizontal won't work. And as you only have one Button for each item, you can just comment out the StackPanel.
The way your code is right now, you are telling each button to be inside it's own horizontally aligned StackPanel. You need to contain all the buttons inside one horizontal StackPanel. Try doing
<TextBlock Width="100" Height="50" FontSize="14" Text="{Binding Key}"></TextBlock>
<StackPanel Orientation="Horizontal">
<ItemsControl Name="dataControl" ItemsSource="{Binding Value}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding MovieName}" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
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.
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
I have a ListBox with this template in it.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<StackPanel Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000" Width="460" MinHeight="76">
<StackPanel Margin="4,4,-4,-153">
<TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
<TextBlock " Text="{Binding Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Yet I have to force set a Width and Height on the Border otherwise it makes like Width and Height of "2".
It is like it does not understand I have 2 TextBlock inside it and won't expand to fill both of them.
This leaves me with having to put a fixed height and width in what I don't like as if the text is too big it gets cutoff.
You can toss out your StackPanel's because you don't need them, they're also what's keeping your wrapping from working, you need a panel like a Grid for that. The negative Margin's also isn't something you'd normally see in a DataTemplate for a ListBox so I'd guess you have some other funky layout stuff going on from that sort of practice elsewhere up the tree.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<Grid Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000"/>
<TextBlock TextWrapping="Wrap"
HorizontalAlignment="Center" Margin="4,4,-4,-153">
<Run Text="{Binding }"/><LineBreak/>
<Run Text="{Binding Mode=OneWay}"/>
</TextBlock>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
So unless I'm missing something somewhere this should fix you up as the Grid will handle the sizes of its children for you and consume the space necessary in its parent. However if there's something else in your structure pushing stuff around and won't let it consume that space it should invoke your Wrapping.
Hope this helps :)
I've got a grouped GridView with some explicitly sized databound controls inside it.
The GridView has a VariableSizedWrapGrid as the ItemPanelTemplate type.
As you can see the ScrollView scrolls well beyond the content.
Any help appreciated, XAML below.
<GridView Grid.Row="2" ItemsSource="{Binding Source={StaticResource contentSetListViewSource}}" ItemTemplate="{StaticResource DashboardContentSetItem}" SelectedIndex="-1" SelectionMode="Multiple" Padding="0,0,0,15" VerticalAlignment="Center" Margin="20 0" HorizontalAlignment="Left">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" Margin="0 10" Style="{StaticResource GroupHeaderTextStyle}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
GridView by default uses an ItemsPanelTemplate consisting of a Border containing a WrapGrid.
So I was targeting the wrong panel, this is the fix I used:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
The reason being that a WrapGrid isn't variable sized it's fixed to the size of the largest collection, the size of the second grouping (1 item) was the same as the first (5 items) which is why it extended beyond the content.