Since my WPF application uses GridSplitters on several occasions, I want to extract that XAML snippet into a separate UserControl.
Of course, using a ResourceDictionary would be nicer. But that way, I can only define a ControlTemplate for the splitter's content and use it within the Template-attribute afterwards - which removes the ability to define all those GridSplitter attributes only once and then consecutively use them.
The GridSplitter UserControl, GridSplitter.xaml:
<GridSplitter HorizontalAlignment="Stretch" Margin="3" ResizeBehavior="PreviousAndNext"
ResizeDirection="Columns" VerticalAlignment="Stretch">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Grid>
<Button Content="⁞" />
<Rectangle Fill="#00FFFFFF" />
</Grid>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>
The usage in MainWindow.xaml:
<Window
(...)
xmlns:uc="clr-namespace:Yoda.Frontend.Resources"
(...)>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition MinWidth="400" Width="*" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<uc:GridSplitter Grid.Column="1" />
<!-- (...) -->
</Grid>
<!-- (...) -->
</Window>
The result of using the above code is a splitter which can't be moved in any direction.
However, using the ResourceDictionary dictionary approach mentioned above, I get a movable GridSplitter.
But despite working perfectly directly in MainWindow.xaml, it only resizes the third grid column.
Sure, setting Width isn't recommended when using GridSplitter. But why does it work whenever the splitter is defined within the main window and only fails to do so when used as an UserControl? And how to fix that in an MVVM, no code-behind way?
In case you only what to have a nice looking splitter, you can use this code:
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition MinWidth="20" Width="Auto" />
<ColumnDefinition MinWidth="400" Width="Auto" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<GridSplitter Grid.Column="1" Background="Gray" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<TextBlock Text="⁞" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
IsHitTestVisible="False" />
<!-- (...) -->
Another solution would be to define the ControlTemplate as a resource and then use that for the GridSplitter:
<Window.Resources>
<ControlTemplate TargetType="{x:Type GridSplitter}" x:Key="gridSplitter">
<Grid Background="Transparent">
<Button Content="⁞" IsHitTestVisible="False" />
<Rectangle Fill="#00FFFFFF" IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition MinWidth="20" Width="Auto" />
<ColumnDefinition MinWidth="400" Width="Auto" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<GridSplitter Grid.Column="1" Template="{StaticResource gridSplitter}" />
<!-- (...) -->
</Grid>
<!-- (...) -->
</Grid>
There's also a solution if you really want to use the set properties within the splitter template: use a style to add those. It would look like this:
<Window.Resources>
<ControlTemplate TargetType="{x:Type GridSplitter}" x:Key="gridSplitter">
<Grid Background="Transparent">
<Button Content="⁞" IsHitTestVisible="False"/>
<Rectangle Fill="#00FFFFFF" IsHitTestVisible="False"/>
</Grid>
</ControlTemplate>
<Style TargetType="{x:Type GridSplitter}" x:Key="styleGridSplitter">
<Setter Property="Template" Value="{StaticResource gridSplitter}" />
<Setter Property="ResizeBehavior" Value="PreviousAndNext" />
<Setter Property="ResizeDirection" Value="Columns" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="3" />
</Style>
</Window.Resources>
<Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition MinWidth="20" Width="Auto" />
<ColumnDefinition MinWidth="400" Width="Auto" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<GridSplitter Grid.Column="1" Style="{StaticResource styleGridSplitter}"/>
<!-- (...) -->
</Grid>
<!-- (...) -->
</Grid>
Related
I am switching from Windows Forms to WPF and I would like to copy the GUI over. Since just running it through a converter gives horrible code I am giving it a go myself. Though when I try to create a simple groupbox, it already is giving me troubles.
I want to create this:
But I end up with this:
This is the XAML:
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<WrapPanel>
<Button Content="Reset" />
<Button Content="Search" />
</WrapPanel>
</StackPanel>
</GroupBox>
If I play around with HorizontalAlignment it doesn't do anything. I want to stretch the buttons (50% each) but I can't seem to find a way to get it done. I feel as if WrapPanel maybe isn't the right container here, but I can't find an alternative.
You can use the Grid container or the UniformGrid container.
Example 1 (Grid instead of WrapPanel):
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Reset" Margin="0,5,5,0" />
<Button Grid.Column="1" Content="Search" Margin="5,5,0,0" />
</Grid>
</StackPanel>
</GroupBox>
Example 2 (Grid for whole layout):
<GroupBox Header="Search" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Button Grid.Row="1" Grid.Column="0" Content="Reset" Margin="0,5,5,0" />
<Button Grid.Row="1" Grid.Column="1" Content="Search" Margin="5,5,0,0" />
</Grid>
</GroupBox>
Example 3 (UniformGrid instead of WrapPanel):
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<UniformGrid Columns="2" Rows="1">
<Button Content="Reset" Margin="0,5,5,0" />
<Button Content="Search" Margin="5,5,0,0" />
</UniformGrid>
</StackPanel>
</GroupBox>
Result layout for all examples:
Useful links
MSDN: WPF Container Controls Overview
MSDN: Grid
MSDN: UniformGrid
CodeProject: WPF Tutorial : Layout-Panels-Containers & Layout Transformation
CodeProject: WPF Layouts - A Visual Quick Start
2,000 Things You Should Know About WPF: UniformGrid
Try this:
<GroupBox Header="Search" Width="200" >
<GroupBox.Resources>
<Style TargetType="{x:Type FrameworkElement}">
<Setter Property="Margin" Value="4"></Setter>
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
</GroupBox.Resources>
<StackPanel Margin="2">
<TextBox />
<UniformGrid Rows="1">
<Button Content="Reset" />
<Button Content="Search" IsDefault="True" />
</UniformGrid>
</StackPanel>
</GroupBox>
I have the following ControlTemplate that I am using in an ItemsControl. It is essentially a 3x3 Grid with a Path in the center and a Textbox/Textblock on top of it. When I use this, the Path takes up all of the space within the ItemsControl, and ignores the column/row definition constraints. Can anyone tell me why this is happening? I tried wrapping the Path in a Canvas but that didn't seem to help.
Thanks!
<controls:Toolbox x:Key="DrawingShapeTemplates"
DefaultItemSize="60, 60"
SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.Items>
<Path Style="{StaticResource Square}"
ToolTip="Square Shape">
<controls:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" />
<TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=controls:DesignerItem}, Path=ActualWidth}" />
</StackPanel>
<Canvas Grid.Column="1"
Grid.Row="1">
<Path Style="{StaticResource Square_DragThumb}" />
</Canvas>
</Grid>
</ControlTemplate>
</controls:DesignerItem.MoveThumbTemplate>
</Path>
</ItemsControl.Items>
</controls:Toolbox>
The Style.
<Style x:Key="Square"
TargetType="Path"
BasedOn="{StaticResource StandardShapeStyle}">
<Setter Property="Data">
<Setter.Value>
<RectangleGeometry Rect="50 50 50 50" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Square_DragThumb"
TargetType="Path"
BasedOn="{StaticResource Square}">
<Setter Property="IsHitTestVisible"
Value="True" />
<Setter Property="Fill"
Value="Transparent" />
<Setter Property="Stroke"
Value="Transparent" />
</Style>
Edit
The source for this was downloaded from hereenter link description here. If you replace the <Path Style="{StaticResource Decision}" at line 469 with the following, you will get the same result that I do.
<Path Style="{StaticResource Decision}"
ToolTip="Decision">
<s:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" />
<TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=s:DesignerItem}, Path=ActualWidth}" />
</StackPanel>
<Path Grid.Column="1"
Grid.Row="1"
Style="{StaticResource Decision_DragThumb}" />
</Grid>
</ControlTemplate>
</s:DesignerItem.MoveThumbTemplate>
</Path>
The following are pictures of what I am trying to accomplish and what the actual result is. I want to display a label and a text box on all four sides of the selected item when it is selected. Ultimately the label/textbox visibility will be databound to the DesignerItem.IsSelected dependency property, but that hasn't been wired up yet.
Expected result:
Actual result:
Typically Canvas do to clip it's children by default so you need to set it explicitly as ClipToBounds="True"
eg
<Canvas Grid.Column="1"
Grid.Row="1"
ClipToBounds="True">
<Path Style="{StaticResource Square_DragThumb}" />
</Canvas>
Update
Replace the Path element in FlowChartSymbols.xaml at line 469 with the following Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" HorizontalAlignment="Center"/>
<TextBox />
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=s:DesignerItem}}"
Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
<Path Style="{StaticResource Decision}"
Grid.Row="1" Grid.Column="1"
ToolTip="Decision">
<s:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Path Style="{StaticResource Decision_DragThumb}" />
</ControlTemplate>
</s:DesignerItem.MoveThumbTemplate>
</Path>
</Grid>
this is how you can achieve the same. also fixed toolbox issue by adding a trigger to detect if it is inside a designer item or simply in a toolbox
I have a problem with my ListBox. I have written several DataTemplates which I use in a ListBox. Each one of these contains a grid and may contain a nested ListBox depending on the item.
My problem is: The height of these nested ListBoxes seem to be different to the root ListBox's height. Additionally it seems, that there is sometimes one pixel margin to the element above.
Has someone encountered this problem, too and maybe solved it?
XAML-Code:
<!-- Template for SubData-Items -->
<DataTemplate x:Key="DataTemplate">
<Grid x:Name="baseGrid" Grid.Column="0" Grid.ColumnSpan="999" Background="Violet">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=Col0, Path=Width}" />
<ColumnDefinition Width="{Binding ElementName=Col1, Path=Width}" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=Row0, Path=Height}"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" Text="{Binding Bezeichnung}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" />
<Line Grid.ColumnSpan="999" Stroke="Black" X1="0" X2="{Binding ElementName=baseGrid, Path=ActualWidth, Mode=OneWay}" Y1="0" Y2="0" VerticalAlignment="Bottom" />
</Grid>
</DataTemplate>
<!-- Template for Items -->
<DataTemplate x:Key="GroupDataTemplate">
<Grid Grid.ColumnSpan="999" Background="Blue">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=Gantt, Path=GridRowHeight}" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="baseGrid" Grid.Column="0" Grid.ColumnSpan="999">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=Col0, Path=Width}" />
<ColumnDefinition Width="{Binding ElementName=Col1, Path=Width}" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=Row0, Path=Height}"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" Text="{Binding Bezeichnung}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" />
</Grid>
<Grid x:Name="expandedGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="999">
<ListBox x:Name="LBMaGruppen" ItemTemplate="{StaticResource DataTemplate}" ItemsSource="{Binding SubdataObjects}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="Auto" Margin="0,0,2,0"
ScrollViewer.CanContentScroll="false" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0" />
</Grid>
</Grid>
</DataTemplate>
<!-- Grid with ListBox -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="Row0" Height="34"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" Width="25" />
<ColumnDefinition x:Name="Col1" Width="*" />
</Grid.ColumnDefinitions>
<ListBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="999" ItemsSource="{Binding ItemSource, Mode=OneWay}"
ItemTemplate="{StaticResource GroupDataTemplate}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto"
ScrollViewer.CanContentScroll="true"
ScrollViewer.IsDeferredScrollingEnabled="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
FontSize="10" />
</Grid>
qqbenq gave a very nice solution . Here is another way to do it.
the control templates of ListBox and ListBoxItem has padding inside their borders. Thankfully ListBoxItem border's padding can be control by a style like so:
<Style
TargetType="ListBoxItem">
<Setter
Property="Padding"
Value="0" />
</Style>
but unfortunately for the ListBox , you will have to override the default template with all of its details to change its internal border's hard-coded padding like this:
<Style
TargetType="ListBox">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ListBox}">
<Border
x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="0"
SnapsToDevicePixels="true">
<ScrollViewer
Focusable="false"
Padding="{TemplateBinding Padding}">
<ItemsPresenter
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsEnabled"
Value="false">
<Setter
Property="Background"
TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
</Trigger>
<Trigger
Property="IsGrouping"
Value="true">
<Setter
Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One last note : remove the Margin that you added inside your xaml.
Solution complete
Add a Margin="-2,0,0,0" and a Padding="-1" to your "LBMaGruppen" named ListBox.
<ListBox x:Name="LBMaGruppen" ItemTemplate="{StaticResource DataTemplate}" ItemsSource="{Binding SubdataObjects}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="Auto" Margin="-2,0,0,0" Padding="-1"
ScrollViewer.CanContentScroll="false" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0" />
Also, the "root" element's height is binded to {Binding ElementName=Gantt, Path=GridRowHeight}, while the "sub" element's height to {Binding ElementName=Row0, Path=Height}, so this must cause the difference.
It seems that you have auto height set on all your ListBox. You could try setting the height to a specific size. EDIT: I see you already have ScrollViewer settings. I think setting the height of the box to a specific size instead of auto will do what you want.
As to the padding between elements see the ListBox.ItemContainerSyle which should allow you to set the margin between elements.
I have a disabled TextBox in a Grid.
The Grid has a BackgroundColor and I want the TextBox to just show some Text.
How can I get the Background of a disabled TextBox to be Transparent?
Here is what I have tried:
<UserControl x:Class="MyProject.Views.TextBoxView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="435"
d:DesignWidth="589"
FontFamily="Arial"
mc:Ignorable="d">
<Grid Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.Resources>
<Style x:Key="TextboxStyle_uniqueName" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="Control.IsEnabled" Value="False">
<Setter Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0"
Grid.Column="0"
Width="Auto"
Height="Auto"
Margin="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
BorderThickness="0"
FontFamily="Courier New"
FontSize="30"
Foreground="Black"
IsEnabled="False"
IsReadOnly="True"
IsTabStop="False"
Style="{StaticResource TextboxStyle_uniqueName}"
Text="BLAHBLAHBLAH" />
</Grid>
</Grid>
</UserControl>
If the Textbox is enabled, everything is okay and setting the Background works.
But as soon I disable it, I can no longer set the Background correctly.
Thought about some hack of Binding IsEnabled, so that the Background is set before.
-EDIT-
Strangly enough using TextBlock solves the issue. But I definitly have no style in the project that sets a background different from the default for TextBox.
I have problems with a .NET 4 application using Bing Maps with custom pushpins. The performance is very bad on zooming or moving the map. I'm using a ObservableCollection which has a data-binding to Bing Maps. Everytime the map changes it is being checked which pushpins are in the map section. The collection will be re-filled and finally a NotifyCollectionChangedEvent is being fired which makes the map draw the pushpins.
<bingMap:MapItemsControl ItemsSource="{Binding Locations}">
<bingMap:MapItemsControl.ItemTemplate>
<DataTemplate>
<bingMap:Pushpin Location="{Binding Coordinates}" Height="Auto" Width="Auto" PositionOrigin="BottomCenter"
Template="{StaticResource PushpinControlTemplateLoc}">
</bingMap:Pushpin>
</DataTemplate>
</bingMap:MapItemsControl.ItemTemplate>
</bingMap:MapItemsControl >
I made some researches with a performance profiler: The InitializeComponent() method of my custom pushpin class needs an average time of 25% to 35%!
There are usually between 10 and 25 custom pushpins displayed on the map. If I reduce the amount of data bindings it becomes a little bit faster, but still not fast enough.
I've already tested out to declare all the brushes as freezed static resources but the drawing still runs very slow.
<SolidColorBrush x:Key="SolidColorBrushUnknownMsg" Color="Gray" ice:Freeze="True" xmlns:ice="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" />
I tried to use the Microsoft default pushpins <bingMap:Pushpin Location="{Binding Coordinates}"/> which was much faster. So there must be something wrong in my usage or implementation of my custom pushpin.
Here's the rest of my code:
Custom pushpin class (only auto-generated code):
public partial class MyPushpin: System.Windows.Controls.Grid
{
public MyPushpin()
{
InitializeComponent();
}
}
Custom pushpin XAML code:
<Grid x:Class="Test.MyPushpin"
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"
mc:Ignorable="d">
<Grid.Resources>
<Style BasedOn="{StaticResource DataTextBlock}" x:Key="test1" TargetType="TextBlock">
<Setter Property="Background" Value="{StaticResource SolidColorBrushErrorMsg}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=TextLine1, Mode=OneWay}" Value="0">
<Setter Property="Background" Value="{StaticResource BackgroundImage}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Border CornerRadius="20" BorderBrush="White" Padding="7" Opacity="0.8" Width="120" Height="100" Background="{StaticResource BackgroundImage}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="test2" Foreground="Black" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TextLine2, StringFormat=N1,Mode=OneWay}" Style="{StaticResource DataTextBlock}" />
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding objCurrentPower.sUnit,Mode=OneWay}" Foreground="Black" />
<!--three more lines of textblocks with data bindings -->
</Grid>
</Border>
Why does my custom pushpin need so much performance?
Problem solved: Instead of using a separate class and xaml and referencing to them it's better to use a ControlTemplate for the custom pushpins in the class the actually contains the Bing Map:
<ControlTemplate x:Key="CutomPushpinTemplate" TargetType="bingMap:Pushpin">
<Border CornerRadius="15" BorderBrush="White" Padding="7" Opacity="0.8" Width="120" Height="90" Background="{StaticResource Bgr_enercon}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition Height="16" />
<RowDefinition Height="16" />
<RowDefinition Height="16" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45" />
<ColumnDefinition Width="32" />
<ColumnDefinition Width="23" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="test2" Foreground="Black" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TextLine2, StringFormat=N1,Mode=OneWay}" Style="{StaticResource DataTextBlock}" />
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding objCurrentPower.sUnit,Mode=OneWay}" Foreground="Black" />
<!--three more lines of textblocks with data bindings -->
</Grid>
</Border>
</ControlTemplate>
This template is used for all pushpins of the Bing Map this way:
<bingMap:MapItemsControl ItemsSource="{Binding Locations}">
<bingMap:MapItemsControl.ItemTemplate>
<DataTemplate>
<bingMap:Pushpin Location="{Binding objCoordinates}" Height="Auto" Width="Auto" PositionOrigin="BottomCenter" Template="{StaticResource CutomPushpinTemplate}">
</bingMap:Pushpin>
</DataTemplate>
</bingMap:MapItemsControl.ItemTemplate>
Doing it that way is much faster. The performance profiler shows that the programm now does not spend so much time for instantiating the custom pushpins.
Here is the xaml code which shows how it was implemented before (slow):
<ControlTemplate x:Key="PushpinControlTemplateLoc" TargetType="bingMap:Pushpin" >
<Test.MyPushpin />
</ControlTemplate>