I have a ListBox that is a drop target of items from other sources.
Everything is working fine except in a particularly situation. When the ListBox has no Items I can only drop in the border of ListBox (I have a trigger so the Border is visible when dragging).
To give a bigger drop area I set the MinHeight of the ListBox to 25. When dragging, the Border reflects the MinHeight of the ListBox but the area is not considered a target. What is probably happening is that the target is considered to be the background because there is no Item in the ListBox.
Here is the code for the ListBox:
<ListBox Name="itmCtrlSetupSteps" Grid.Row="1" MinHeight="25"
BorderThickness="2" BorderBrush="{Binding DropBrush}" Background="Transparent"
ItemsSource="{Binding SetupSteps}" SelectionMode="Single" ItemContainerStyle="{StaticResource StepItemStyle}"
HorizontalContentAlignment="Stretch" Focusable="True"
SelectionChanged="manageStep_SelectionChanged"
AllowDrop="True" DragOver="itmCtrls_DragOver" Drop="itmCtrls_Drop" KeyUp="List_KeyUp"
>
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type my:TestStepListingStepViewModel}">
<my:TestStepListingStepView HorizontalAlignment="Stretch" GotFocus="setupSteps_GotFocus" MouseDoubleClick="Step_MouseDoubleClick"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If I set the ItemPanel to:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Grid ClipToBounds="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
I can drop items in the empty ListBox but then the items are presented on top of each other, instead of as a list.
Any thoughts on this?
The problem is that your ListBox isn't showing up when it is hit tested. You need to set the Background Brush on the Border in the control template so that it reflects your setting of Transparent on the ListBox.
<ControlTemplate TargetType="ListBox">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<ItemsPresenter/>
</Border>
</ControlTemplate>
In case someone is having this issue with any other control, just surround it with a border, set the background to a colour, and add the drag/drop events on the border along with AllowDrop set to be true.
Related
I'm having some trouble learning WPF, I've set up a custom UserControl like so:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:LobbyApp" x:Class="LobbyApp.ChatPanel"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="600">
<UserControl.Resources>
<DataTemplate DataType="{x:Type local:ChatMessage}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition>
<ColumnDefinition.Width>Auto</ColumnDefinition.Width>
<ColumnDefinition.SharedSizeGroup>Date</ColumnDefinition.SharedSizeGroup>
</ColumnDefinition>
<ColumnDefinition>
<ColumnDefinition.Width>Auto</ColumnDefinition.Width>
<ColumnDefinition.SharedSizeGroup>Who</ColumnDefinition.SharedSizeGroup>
</ColumnDefinition>
<ColumnDefinition>
<ColumnDefinition.Width>*</ColumnDefinition.Width>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<DataGridCell BorderThickness="0" Content="{Binding Timestamp}" Grid.Column="0" Background="Black" Foreground="LightCyan"/>
<DataGridCell BorderThickness="0" Content="{Binding Who}" Grid.Column="1" Background="Black" Foreground="LightBlue"/>
<DataGridCell BorderThickness="0" Grid.Column="2" Background="Black" Foreground="White">
<TextBox Text="{Binding What, Mode=OneWay}" IsReadOnly="True" TextWrapping="Wrap"/>
</DataGridCell>
</Grid>
</DataTemplate>
</UserControl.Resources>
<ListBox ItemsSource="{Binding History}" SnapsToDevicePixels="True" Background="Magenta" Padding="0"/>
Most of that I think doesn't matter, just including it for completeness. The interesting bit is I see the magenta background outside the scrollbars, like the listbox content and it's scrollbars are actually padded inside the listbox. It looks like this:
I see the outer magenta even if the listbox is a reasonable size, it's just easier to see when you shrink it small like that.
I've tried every margin/padding on every element I can to get rid of the magenta, but I can't seem to. I don't know what is causing that, or how to 'fix' it. I'll probably simplify my example down to the most basic parts but thought I'd post first since maybe it's just a dumb obvious answer. My apologies if so.
This is because the ListBox has a hard coded value of '1' for the Border Padding.
<ControlTemplate TargetType="{x:Type ListBox}">
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true"
Padding="1">
<ScrollViewer Padding="{TemplateBinding Padding}"
Focusable="false">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
So you can either modify the template yourself, or just hack it like below :
void OnListBoxLoaded(object sender, RoutedEventArgs e)
{
Border border = VisualTreeHelper.GetChild((ListBox)sender, 0) as Border;
if(border != null)
{
border.Padding = new Thickness(0);
}
}
The above makes an assumption that you are using the default windows aero theme. If you change theme, or indeed if the aero theme gets changed, it may break.
Using ItemsControl to display a collection of items on a Canvas.
Probelm is that I can't see all the items on my screen (need to use Scrollbars), I've checked this post out and tried the same but it doesn't work for me, the Scrollbar is shown but disabled. My XAML:
<Grid>
<DockPanel>
<ScrollViewer>
<ItemsControl ItemsSource={Binding MyCollection}>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
</Grid>
ItemsControl by default doesn't have ScrollViewer in it's Template unlike ListBox.
Get rid of the outer scrollViewer and set the Template of ItemsControl to contain ScrollViewer. Also, I don't see any usage of DockPanel when you already wrap ItemsControl inside Grid.
Change layout something like this:
<Grid>
<ItemsControl ItemsSource={Binding MyCollection}>
<ItemsControl.Template>
<ControlTemplate>
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True">
<ScrollViewer
Padding="{TemplateBinding Control.Padding}"
Focusable="False">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding
UIElement.SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
the above tree view is looking with shadow effect on top left and left. I need a single thick line .
my xaml is
Margin="0,0,0,2" BorderBrush="Black" BorderThickness="1"
I need a single line but not a shodow. Can you please help me how to do it ?
One way to do it is to create simple Template for your TreeView like so:
<TreeView BorderBrush="Black" BorderThickness="1" Background="Beige">
<TreeView.Template>
<ControlTemplate TargetType="{x:Type TreeView}">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</TreeView.Template>
</TreeView>
You can try this to get rid of treeview border and apply your own border:
<Border BorderThickness="1" BorderBrush="Black">
<TreeView BorderBrush="Transparent" BorderThickness="0"
</TreeView>
</Border>
New to WPF and have Tabs and in each tab the content is presented in a curved corner panel/window/whateveryouwannacallit. I wasn't sure how to do this ( Style, ControlTemplate ) but decided to go the DataTemplate way.
So now I have this DataTemplate:
<DataTemplate x:Key="TabContentPresenter" >
<Border Margin="10"
BorderBrush="{StaticResource DarkColorBrush}"
CornerRadius="8"
BorderThickness="2"
Grid.Row="0"
Padding="5"
Background="{TemplateBinding Background}">
<ContentPresenter Content="{Binding}" />
</Border>
</DataTemplate>
As you can see with the the background property I wan't to set the background color at the content but Don't know how. Here I use it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl ContentTemplate="{StaticResource TabContentPresenter}" Background="White">
<!-- Something Here -->
</ContentControl>
<ContentControl ContentTemplate="{StaticResource TabContentPresenter}" Grid.Row="1" Background="Blue">
<!-- Something Here -->
</ContentControl>
</Grid>
Is using DataTemplate wrong here or is there any other way?
I could probably set the background straight on the content and change from padding in mthe template to margin in the content but in some similiar situations that wouldn't work and it's nicer to only have to set it once.
EDIT:
As per advice I changed to ControlTemplate and also put it inside a style. This solves the Background problem but creates a bigger one. Now the content won't appear. I read on a blog here that putting a targetType solves this but it didn't solve my problem. The code looks like this now and also changed the ContentControl to use the style instead of Template.
<Style x:Key="TabContentPresenter" TargetType="ContentControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Margin="10"
BorderBrush="{StaticResource DarkColorBrush}"
CornerRadius="8"
BorderThickness="2"
Grid.Row="0"
Background="{TemplateBinding Background}">
<ContentPresenter Content="{Binding}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use ControlTemplate instead DataTemplate
<ControlTemplate x:Key="TabContentPresenter">
<Border Margin="10"
CornerRadius="8"
BorderThickness="2"
Grid.Row="0"
Padding="5"
Background="{TemplateBinding Background}">
<ContentPresenter Content="{Binding}"/>
</Border>
</ControlTemplate>
Use Template instead of ContentTemplate
<ContentControl Background="Green" Template="{StaticResource TabContentPresenter}"/>
May be because TemplateBinding does not work with DataTemplate. Check this question for details.
Even if it works, all you need is a ControlTemplate and not a datatemplate.
I have an ItemsControl containing a list of data that I would like to virtualize, however VirtualizingStackPanel.IsVirtualizing="True" does not seem to work with an ItemsControl.
Is this really the case or is there another way of doing this that I am not aware of?
To test I have been using the following block of code:
<ItemsControl ItemsSource="{Binding Path=AccountViews.Tables[0]}"
VirtualizingStackPanel.IsVirtualizing="True">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Initialized="TextBlock_Initialized"
Margin="5,50,5,50" Text="{Binding Path=Name}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If I change the ItemsControl to a ListBox, I can see that the Initialized event only runs a handful of times (the huge margins are just so I only have to go through a few records), however as an ItemsControl every item gets initialized.
I have tried setting the ItemsControlPanelTemplate to a VirtualizingStackPanel but that doesn't seem to help.
There's actually much more to it than just making the ItemsPanelTemplate use VirtualizingStackPanel. The default ControlTemplate for ItemsControl does not have a ScrollViewer, which is the key to virtualization. Adding to the the default control template for ItemsControl (using the control template for ListBox as a template) gives us the following:
<ItemsControl ItemsSource="{Binding AccountViews.Tables[0]}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Initialized="TextBlock_Initialized"
Text="{Binding Name}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsVirtualizing="True"
VirtualizationMode="Recycling" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}">
<ScrollViewer CanContentScroll="True"
Padding="{TemplateBinding Padding}"
Focusable="False">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
(BTW, a great tool for looking at default control templates is Show Me The Template)
Things to notice:
You have to set ScrollViewer.CanContentScroll="True", see here for why.
Also notice that I put VirtualizingStackPanel.VirtualizationMode="Recycling". This will reduce the numbers of times TextBlock_Initialized is called to however many TextBlocks are visible on the screen. You can read more on UI virtualization here
.
EDIT: Forgot to state the obvious: as an alternate solution, you can just replace ItemsControl with ListBox :)
Also, check out this Optimizing Performance on MSDN page and notice that ItemsControl isn't in the "Controls That Implement Performance Features" table, which is why we need to edit the control template.
Building on DavidN's answer, here is a style you can use on an ItemsControl to virtualise it:
<!--Virtualised ItemsControl-->
<Style x:Key="ItemsControlVirtualizedStyle" TargetType="ItemsControl">
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ItemsControl">
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
>
<ScrollViewer Padding="{TemplateBinding Control.Padding}" Focusable="False">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I do not like the suggestion to use a ListBox as they allow the selection of rows where you do not necessarily want it.
It is just that the default ItemsPanel isn't a VirtualizingStackPanel. You need to change it:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>