wpf itemscontrol items outside of control - wpf

I have an own control which derives from itemscontrol with an own template. I am using a Canvas inside the itemscontrol as ItemsPanel. Why f.e. on resize of the window the items also can be outside of the itemscontrol?
Templates:
<Style TargetType="{x:Type local:Dashboard}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Dashboard}">
<Grid>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
The items use this:
<Style TargetType="{x:Type local:Widget}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Widget}">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="2" BorderBrush="Black" Background="WhiteSmoke"
x:Name="Part_Header">
<ContentPresenter ContentSource="Header"/>
</Border>
<Border Grid.Row="1" BorderThickness="2" BorderBrush="Black" Background="WhiteSmoke">
<Grid>
<ContentPresenter />
<ResizeGrip x:Name="Part_Resize"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Cursor="SizeNWSE" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Depending on your alignment and margin settings, resizing a parent can cause children to move outside of a parent's boundaries. The easiest way I've found to check this is to load Blend and resize the parent, watching how contained controls move. By tweaking the anchors in Blend (which changes alignments and margins), you should be able to troubleshoot why they move.

Related

ItemsControl is preventing item content from expanding to fill its container

I am creating a WPF custom control that inherits from ItemsControl. In the ControlTemplate of my control I have an ItemsPresenter. The problem is that I need to be able to get content in the items presenter to fill the entire content area. In the code below I have a simplified example of the broken code and also what I am trying to accomplish. BTW setting HorizontalAlignment and VerticalAlignment to Stretch causes the content expand horizontally but not vertically.
<Window x:Class="yada"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="768" Width="1024">
<Grid>
<Grid.Resources>
<Style TargetType="Border" x:Key="stepBorder">
<Setter Property="Background" Value="CadetBlue"></Setter>
<Setter Property="BorderBrush" Value="Green" ></Setter>
<Setter Property="BorderThickness" Value="2"></Setter>
<Setter Property="Padding" Value="25"></Setter>
</Style>
</Grid.Resources>
<TabControl Margin="0,20,0,0">
<TabItem Header="Broken">
<Border>
<ItemsControl>
<ItemsControl.Items>
<Control>
<Control.Template>
<ControlTemplate>
<Border Style="{StaticResource stepBorder}">
<TextBlock Text="Border fills small region near the top"></TextBlock>
</Border>
</ControlTemplate>
</Control.Template>
</Control>
</ItemsControl.Items>
</ItemsControl>
</Border>
</TabItem>
<TabItem Header="Works">
<Border>
<Control>
<Control.Template>
<ControlTemplate>
<Border Style="{StaticResource stepBorder}" >
<TextBlock Text="Border fills entire control"></TextBlock>
</Border>
</ControlTemplate>
</Control.Template>
</Control>
</Border>
</TabItem>
</TabControl>
</Grid>
</Window>
Here is some code from my control. I cant include it all, there is too much. I think this is the relevant part however:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Wizard}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" x:Name="ContentRow" />
<RowDefinition Height="{Binding ElementName= NavButtonPanel,Path=ActualHeight}"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" x:Name="ContentScrollViewer" MaxHeight="{Binding ElementName=ContentRowHeight, Path=ActualHeight}">
<ItemsPresenter
x:Name="Presenter"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
</ItemsPresenter>
</ScrollViewer>
<Border Style="{TemplateBinding NavButtonPanelStyle}" Grid.Row="1" x:Name="NavButtonPanel">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
</StackPanel>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate></DataTemplate>
</Setter.Value>
</Setter>
As usual, just posting on SO gets me halfway to my answer.
It turns out the ItemsControl is using an evil stackpanel as a container for items. Fortunately there is a top-secret property called ItemsPanel that lets you change this. Just set it to a grid as shown below and you are in business.
In my case I am writing a custom control that inherits from ItemsControl so in the Style I add this property setter:
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid></Grid>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>

WPF drag and drop only working when dropping on the items in the listview

So I have a listview in which I set up drag and drop, but for some reason it only lets me drop inside the actual items in the listview, rather than on any portion of the controltemplate that I overrode. How do I make it so that I can also do drag and drop over the textblock containing the title for the column?
<ListView
Margin="0,4,0,0"
Grid.Column="0"
x:Name="NameListView"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding Path = AddedItems}"
SelectionChanged="NameListView_SelectionChanged"
AllowDrop="True"
SelectionMode="Extended"
VirtualizingStackPanel.VirtualizationMode="Standard"
>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border
Name="Border"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true"
Background="Transparent"
>
<ContentPresenter
Content="{TemplateBinding Content}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border"
Property="Background" Value="{x:Static SystemColors.HighlightBrush}"
/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<EventSetter Event="PreviewMouseDoubleClick" Handler="NameListView_PreviewMouseDoubleClick"/>
</Style>
</ListView.ItemContainerStyle>
<!-- Until NET 4.0 Keygesture's cannot bind to a command, so the inputbindings must be set using static commands or with code behind-->
<ListView.Template>
<!--Template Defining the layout of this treeview-->
<ControlTemplate>
<Grid
Background="{TemplateBinding Background}"
>
<Grid.RowDefinitions>
<RowDefinition
Height="{Binding GraphHeight, Source={x:Static DaedalusGraphViewer:SettingsManager.AppSettings},
Converter={StaticResource GridLengthConverter}}"
/>
<RowDefinition Height="*"/>
<RowDefinition Height="18" />
</Grid.RowDefinitions>
<Border
Grid.ZIndex="1"
Grid.Row="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
>
<Grid>
<TextBlock
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="Signal Names"
/>
</Grid>
</Border>
<Canvas>
<Line
Grid.ZIndex="2"
x:Name="SelectedItemUnderline"
Stroke="Black"
StrokeThickness="3"
Visibility="Collapsed"
/>
</Canvas>
<ScrollViewer
Grid.ZIndex="1"
x:Name="SignalNameScrollViewer"
Grid.Row="1" Grid.RowSpan="2"
CanContentScroll="False"
VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Visible"
>
<ItemsPresenter />
</ScrollViewer>
</Grid>
</ControlTemplate>
</ListView.Template>
</ListView>
I had a first chance exception being handled inside the drag operation, so when I fixed that code, it allowed me to drop anywhere in the listview. Basically, if an exception is thrown in the drag handlers, the mouse cursor will display not available to drop and fail drop

Why does setting the "Template" property in a style breaking scrolling?

I'm using this sample to create a multi-column tree view and I've noticed that scrolling no longer works correctly for this list view:
After some playing around I've discovered that the bit that is breaking the scrollbars is the setting of the "Template" property for the TreeListView:
<Style TargetType="{x:Type l:TreeListView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type l:TreeListView}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<DockPanel>
<GridViewHeaderRowPresenter Columns="{StaticResource gvcc}" DockPanel.Dock="Top"/>
<ItemsPresenter/>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Commenting out the above fixes the scrollbars (however obviously means that the grid column headers are not shown). In fact I've discovered that even the following template breaks the scrollbars:
<Style TargetType="{x:Type l:TreeListView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type l:TreeListView}">
<ItemsPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Why is this?
I think this happens because you edit the template of the control defined by WPF.
and it's defined to have a scrollBar.
you override that template and don't add one.
i'm not 100% sure about that, but i'm wondering why are you messing with the Control Template to begin with?
maybe what you want to edit is the DataTemplate?
The DataTemplate decides how to present the object that is bound by Data Binding.
You need to implement your own scrollbars since you are overwriting the default template.
Wrap your ControlTemplate's ItemsPresenter in a ScrollViewer
In the end I solved this by adding in the scrollbars myself - initially I implemented this the nieve way and just got the original content to scroll, the I discovered that the horizontal scroll bar didn't work properly if I did that (the headers didn't scroll).
Instead I used the Control Template Reference to figure out what the base control does and did a variation on wjat the ListView does.
I can see now why I need to set the entire template when I do things like this - what I believed was simple actually turned out to be completely specific to my control.
Here is my Xaml:
<Style x:Key="{x:Static local:TreeListView.ScrollViewerStyleKey}" TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Margin="{TemplateBinding Padding}">
<ScrollViewer DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Focusable="false">
<GridViewHeaderRowPresenter Margin="2,0,2,0"
Columns="{Binding Path=TemplatedParent.Columns,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderContainerStyle="{Binding
Path=TemplatedParent.View.ColumnHeaderContainerStyle,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderTemplate="{Binding
Path=TemplatedParent.View.ColumnHeaderTemplate,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderTemplateSelector="{Binding
Path=TemplatedParent.View.ColumnHeaderTemplateSelector,
RelativeSource={RelativeSource TemplatedParent}}"
AllowsColumnReorder="{Binding
Path=TemplatedParent.View.AllowsColumnReorder,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderContextMenu="{Binding
Path=TemplatedParent.View.ColumnHeaderContextMenu,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderToolTip="{Binding
Path=TemplatedParent.View.ColumnHeaderToolTip,
RelativeSource={RelativeSource TemplatedParent}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
<ScrollContentPresenter Name="PART_ScrollContentPresenter"
KeyboardNavigation.DirectionalNavigation="Local"
CanHorizontallyScroll="False"
CanVerticallyScroll="False" />
</DockPanel>
<ScrollBar Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Grid.Row="1"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{TemplateBinding HorizontalOffset}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
<ScrollBar Name="PART_VerticalScrollBar"
Grid.Column="1"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type local:TreeListView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeView">
<Border Name="Border" CornerRadius="1" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
<ScrollViewer Style="{DynamicResource {x:Static local:TreeListView.ScrollViewerStyleKey}}">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The above required that I add some extra properties to the control itself:
public static ResourceKey ScrollViewerStyleKey
{
get
{
return new ComponentResourceKey(typeof(TreeListView), "TreeListView_ScrollViewerStyleKey");
}
}

wpf chart legend

How do I enlarge those rectangles ?
I'm using wpf toolkit charts and I've tried to play with the control legend but it didn't helped.
With Blend, in the Objects panel:
Right Click on [PieSeries]
-Edit Additional Templates
-Edit LegendItemStyle
-Edit a Copy
You should get a default style:
<Style x:Key="PieChartLegendItemStyle" TargetType="{x:Type chartingToolkit:LegendItem}">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal">
<Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0" />
<visualizationToolkit:Title Content="{TemplateBinding Content}" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And your control will get a LegendItemStyle
<Charting:PieSeries ItemsSource="{Binding PutYourBindingHere}"
IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" IsSelectionEnabled="True" LegendItemStyle="{DynamicResource PieChartLegendItemStyle}">

Change Silverlight Chart Legend Item Layout

I am working on customizing the layout of a Silverlight Toolkit Chart. I have two requirements:
1) Move the Legend area to the bottom of the chart (solved).
2) change the layout of elements within the legend to be displayed next to each other,
ie. {legend 1},{legend 2},{legend 3}, rather than the default column format.
1) was easy to solve with a ControlTemplate (see below).
2) How do I change the layout of legend items? Can it be done by further customizing the Chart's ControlTemplate, or does the Legend need its own ControlTemplate?
The Chart itself is defined as:
<chartingToolkit:Chart Name="chartCompareMain"
Template="{StaticResource ChartLayoutLegendBottom}">
<chartingToolkit:Chart.Axes>
<chartingToolkit:DateTimeAxis Orientation="X"
AxisLabelStyle="{StaticResource ChartDateFormat}">
</chartingToolkit:DateTimeAxis>
<chartingToolkit:LinearAxis Orientation="Y"/>
</chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>
The ControlTemplate to move the legend items (based on the default template) is:
<ControlTemplate x:Key="ChartLayoutLegendBottom" TargetType="chartingToolkit:Chart">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<dataviz:Title Grid.Row="0" Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />
<Grid Grid.Row="1" Margin="0,15,0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Column="0" >
<Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
<Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
</chartingprimitives:EdgePanel>
</Grid>
<dataviz:Legend x:Name="Legend" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Row="2"/>
</Grid>
</Border>
</ControlTemplate>
For completeness sake, here is the LegendStyle="{StaticResource BottomLegendLayout} (very useful tool to figure out styles is the Silverlight Default Style Browser)
<Style x:Name="BottomLegendLayout" TargetType="dataviz:Legend">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="chartingToolkit:LegendItem" >
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LegendItem">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="2,2,5,2">
<Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0" VerticalAlignment="Center" />
<dataviz:Title Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="dataviz:Title">
<Setter Property="Margin" Value="0,5,0,10" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel"> <!-- change layout container for legend items to be horizonal -->
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dataviz:Legend">
<!-- This is the border around the legend area.
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="2">
-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<!-- Uncomment the next line to show a grid title. -->
<!--<dataviz:Title Grid.Row="0" x:Name="HeaderContent" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Style="{TemplateBinding TitleStyle}"/>-->
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" BorderThickness="0" Padding="0" IsTabStop="False">
<ItemsPresenter x:Name="Items" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Adding the following to the chart will do the trick (from here):
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="dataviz:Legend">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:Chart.LegendStyle>

Resources