Let me show you part of my XAML code :
<ListBox Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.IsDeferredScrollingEnabled="True"
HorizontalAlignment="Stretch" ItemsSource="{Binding}" Margin="1,1,0,0"
Name="listBox_Faits" Width="290" VerticalAlignment="Stretch"
SelectionChanged="listBox_Faits_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="SlateGray" BorderThickness="0.5" Margin="1,2,1,1"
Width="{Binding ElementName=listBox_Faits, Path=Width}">
When too much borders are created (it is linked with an ObservableCollection), a vertical scroll bar appears, and my border doesn't resize on its own. (I would like to see the complete border, I don t want it to be cut at the end)
If anyone has an idea, thanks!
Don't hesitate to ask, if you need more information!
Rgds,
Flo
You can make ListBoxItem stretch by adding this, and then you can remove the Width binding for the Border
<ListBox ...>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<!-- ... -->
The problem is that you are setting the Width of the Border. This means it will be a fixed size, even if the visible are is smaller than the size of the list item. If you don't set the Border.Width, it will resize to fit within the scroll bar.
Related
I have an Itemscontrol using a VirtualizingStackPanel to display a huge (and growing) list of items:
<ItemsControl Grid.Row="1" Name="ConversationItemsControl" VirtualizingStackPanel.VirtualizationMode="Recycling">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:Message />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The virtualization is working like a charm, but i cannot get the management of the scrollbar right. If I try to programmatically (e.g. on load) scroll to the bottom like i do in non-virtualized StackPanels:
var scrollViewer = VisualTreeHelper.GetChild(ConversationItemsControl, 0) as ScrollViewer;
scrollViewer.ChangeView(null, double.MaxValue, 1f, true);
the scrollviewer tries to scroll to the bottom, but does not do so completely - it always stops a bit before the "real" bottom. This makes sense in a way since VirtualizingStackPanels are using the scroll value to determine which items to render, but it is totally grinding my gears and unacceptable for end users.
How can I scroll to the "real" bottom? What do I have to do if i want to scroll exactly so far down that the top of a certain item is at the top of the viewport (unless the "real" bottom is too close, naturally)?
This is because the built-in ItemsControl class doesn't support virtualization. You can try a ListBox instead, which uses UI virtualization by default.
If you don't want to have selection behaviour, just set:
<ListBox x:Name="lbCustom">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
and then something like:
lbCustom.ScrollIntoView(lbCustom.Items[lbCustom.Items.Count - 1]
I am using DropDownButton control of Mahapps.Metro components pack.
I want to highlight the whole line in ContextMenu (this is a part of this control).
XAML
<controls:DropDownButton x:Name="ddbPlaylist" Grid.Column="1" BorderThickness="0" ArrowBrush="{x:Null}" ItemsSource="{Binding PlaylistVM}"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Bottom" Grid.Row="0">
<controls:DropDownButton.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</controls:DropDownButton.ItemContainerStyle>
<controls:DropDownButton.Content>
<TextBlock Text="{Binding Title}" TextTrimming="CharacterEllipsis" Style="{StaticResource DetailsTextStyle}" VerticalAlignment="Bottom"/>
</controls:DropDownButton.Content>
</controls:DropDownButton>
As the MenuItems contains left and the right margin, reserved in order to show icon and glyph. I have found a solution for ContextMenu System.Windows.Controls.MenuItem without icon area but can not understand how to apply it in my case. Becouse ContextMenu lies in very depths of DropDownButton template, i ca not find a way to change it's style.
My listboxes are data driven from Lists of objects with databinding using a DataTemplate eg:
<ListBox x:Name="TheMainListBox"
ScrollViewer.IsVerticalRailEnabled="True"
ScrollViewer.IsHorizontalRailEnabled="False"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="540"
ItemsSource="{Binding}"
Width="Auto"
Margin="0"
Padding="0"
Background="Yellow"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionChanged="TheMainListBox_SelectionChanged"
DoubleTapped="TheMainListBox_DoubleTapped"
>
The template:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid or Stackpanel Background="Blue"
Padding="0"
BorderBrush="Black"
BorderThickness="1"
Margin="0"
>
.... Binding Textboxes/blocks
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
I end up with a yellow container, the ListBox, .. with blue rectangles inside, the ListBox items but there is a vertical gap between them. I can set a negative vertical-top margin but that is cruddy and doesn't work for the top item. How can I reduce the vertical gap between items to zero.
If a create a ListBox with static items, each in a ListBoxItem container, eg:
<ListBoxItem BorderThickness="1" Width="100" Height="50"
BorderBrush="Black" Background="Red"/>
It all works as required.
So how can I get rid of the vertical spacing between items with the ItemTemplate/DataBinding?
This is mission critical, thx in advance.
I don't have time to load up a proj to test but you should be able to just kill the margin/padding that could cause it. So add;
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
I haven't thought a lot of why this could be happening, haven't digged into styles ither, and my answer doesn't look nice, but try Margin="0,-2,0,-2"
<DataTemplate>
<Grid or Stackpanel Background="Blue"
Padding="0"
BorderBrush="Black"
BorderThickness="1"
Margin="0,-2,0,-2"
>
.... Binding Textboxes/blocks
</Grid>
</DataTemplate>
properly setting the height of the ListBoxItem will solve the issue. Here is the code snippet
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="Your_Desired_Height"/>
</Style>
</ListBox.ItemContainerStyle>
For listbox please use Height property and for listview use MinHeight property. Replace the required height value in the Your_Desired_Height placeholder.
I'm trying to make a Windows Phone page with 2 columns, where the columns fill all of their space to make rectangular buttons similar to the Windows Phone menu. Surprisingly, this is trickier than expected. I have the layout working, and the 2 columns, however, they are small rectangles, not filling their width or height.
I don't want to use any "Width = 250" or whatever. I'm purely interested in a responsive layout solution. My current code is below. I've been here for about 2 days now...
<ListView
Grid.Row="1"
ItemsSource="{Binding Locations}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Margin="12">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="12"
BorderThickness="0">
<Button.Template>
<ControlTemplate>
<StackPanel Background="{ThemeResource PhoneAccentBrush}">
<Image />
<TextBlock
TextAlignment="Center"
Text="{Binding Name}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="2"
HorizontalAlignment="Center"
VerticalChildrenAlignment="Stretch"
HorizontalChildrenAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here's a screenshot of what it currently looks like. As you can see, the buttons have a massive margin that is not actually given by me...
http://gyazo.com/3c949bd9a6ac5d08b3e40bd5c9bb0e7b
As you say it looks like you do have two columns in your picture. I'm also seeing from your markup that you have 12 pixels margin on your list and 12 pixels margin on your buttons. That means that you're going to have at least 24 pixels of margin between all your UI elements. Looking at the picture I'm seeing closer to 60 pixels between UI elements. We should break this down further to see where the extra size is coming from.
For debugging purposes can you please add a temporary background color to your ListView and a different background color to your DataTemplate item's StackPanel. Then take a new screenshot and see what elements are consuming all the space. I bet it's the ListViewItem. You might want modify the ItemContainerStyle to remove any built in non-visible UI elements taking up space.
My environment is windows phone 7.1.
I have the following code:
<ListBox ItemsSource="{Binding Path=Items}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Black" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="200" Height="400"
Canvas.Top="400"> <====== This is not working
... Some content ...
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
There is a ListBox that has a Canvas as ItemsPanel.
The ListBoxItems itself are also of type Canvas. For the ListBoxItems I set Canvas.Top =400, i expect the items to show with an offset of 400 in the ItemsPanel.
Unfortunately this doesn't work, the items are rendered at an offset of 0 as shown in this image (the ItemsPanel is black, the colorful rectangle is a listitem):
Why arent the ListBoxItems rendered at an offset of 400?
You are setting the Canvas.Top on the contents of the ListBoxItems not the actual items
When using a canvas as item panel you have to remember that your datatemplated objects are wrapped in ListboxItems
ListBox
Canvas <- your itemtemplate
ListBoxItem
Canvas <- your datatemplate
solution:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Top" Value="400"/>
</Style>
</ListBox.ItemContainerStyle>
Try adding this to your ListBox
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
Because you see, the Black Area is the ListBox, but not your ListBoxItem. Due a "commonly known bug", if we still can call it that, the ListBoxItem doesn't stretch, unless you add the code above.