In this tip, we're going to create a custom control derived from ToolTip to create a headered tooltip with an icon. Creating it as a custom control makes it trivial to add the tooltip to any control in your project.
This simple example will include a specific icon and has a property to hide/show the icon. I'll explain later how you could update the control's implementation to accept an icon through binding, enabling different icons across different uses.
The first step is to create the custom control class that inherits from ToolTip. Here is the implementation for HeaderedToolTip.
[TemplatePart(Name = PART_TooltipHeader, Type = typeof(TextBlock))]
[TemplatePart(Name = PART_TooltipIcon, Type = typeof(ContentControl))]
[TemplatePart(Name = PART_TooltipContents, Type = typeof(TextBlock))]
public class HeaderedToolTip : ToolTip
{
private const string PART_TooltipHeader = "PART_TooltipHeader";
private const string PART_TooltipIcon = "PART_TooltipIcon";
private const string PART_TooltipContents = "PART_TooltipContents";
private TextBlock _headerBlock = null;
private ContentControl _iconControl = null;
private TextBlock _contentsBlock = null;
static HeaderedToolTip()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(HeaderedToolTip), new FrameworkPropertyMetadata(typeof(HeaderedToolTip)));
}
public string HeaderText
{
get => (string)GetValue(HeaderTextProperty);
set => SetValue(HeaderTextProperty, value);
}
// Using a DependencyProperty as the backing store for HeaderText. This enables animation, styling, binding, etc.
public static readonly DependencyProperty HeaderTextProperty =
DependencyProperty.Register("HeaderText", typeof(string), typeof(HeaderedToolTip), new UIPropertyMetadata(string.Empty));
public string ContentText
{
get => (string)GetValue(ContentTextProperty);
set => SetValue(ContentTextProperty, value);
}
// Using a DependencyProperty as the backing store for HeaderText. This enables animation, styling, binding, etc.
public static readonly DependencyProperty ContentTextProperty =
DependencyProperty.Register("ContentText", typeof(string), typeof(HeaderedToolTip), new UIPropertyMetadata(string.Empty));
public Visibility IconVisibility
{
get => (Visibility)GetValue(IconVisibilityProperty);
set => SetValue(IconVisibilityProperty, value);
}
// Using a DependencyProperty as the backing store for IconVisibility. This enables animation, styling, binding, etc.
public static readonly DependencyProperty IconVisibilityProperty =
DependencyProperty.Register("IconVisibility", typeof(Visibility), typeof(HeaderedToolTip), new UIPropertyMetadata(Visibility.Collapsed));
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_headerBlock = GetTemplateChild(PART_TooltipHeader) as TextBlock;
_iconControl = GetTemplateChild(PART_TooltipIcon) as ContentControl;
_contentsBlock = GetTemplateChild(PART_TooltipContents) as TextBlock;
}
}
Some of this code is not necessary for our tooltip, but I added it here to illustrate how you can get a reference to parts of your custom control within the class in OnApplyTemplate(). This would be useful if you need to respond to any events fired from the controls that make up your custom controls. You would add the event handler hooks here after resolving them through GetTemplateChild.
The next step is to set up the template in a ResourceDictionary. Here is the XAML markup from my ToolTipResourceDictionary.xaml file.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ToolTipSample.Controls">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\Images\vector_Information.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type local:HeaderedToolTip}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:HeaderedToolTip}">
<Border BorderThickness="2" BorderBrush="Black">
<Grid Background="Ivory">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{TemplateBinding HeaderText}"
x:Name="PART_TooltipHeader"
FontWeight="Bold"
VerticalAlignment="Bottom"
Margin="4"
HorizontalAlignment="Left"/>
<ContentControl Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
x:Name="PART_TooltipIcon"
Content="{StaticResource vector_Information}"
Visibility="{TemplateBinding IconVisibility}"
Height="16" Width="16"
Margin="4"/>
<TextBlock Grid.Row="1"
Grid.ColumnSpan="2"
Margin="4,12,4,6"
x:Name="PART_TooltipContents"
Text="{TemplateBinding ContentText}"
TextWrapping="Wrap"
MaxWidth="200"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
The final step is to consume our custom tooltip in a control somewhere in our project. I have create a Window containing a horizontally aligned StackPanel with two Grids. Each grid contains a border that glows a different color when you mouse over it, one blue, one gold. The second grid is disabled to demonstrate the ToolTipService.ShowOnDisabled attached property. Each Grid.ToolTip contains an instance of our HeaderedToolTip custom tooltip control.
<Window.Resources>
<ResourceDictionary Source="..\ToolTipResourceDictionary.xaml"/>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Grid ToolTipService.ShowOnDisabled="True">
<Border Width="180" Height="180"
Margin="10" Background="Transparent"
BorderBrush="White" BorderThickness="2" Opacity="1.0">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Color="Gold" Opacity="1" BlurRadius="20"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="4"/>
</Border>
<Grid.ToolTip>
<local:HeaderedToolTip HeaderText="My first fantastic header."
ContentText="Some tooltip text. This could get really long."
IconVisibility="Visible"/>
</Grid.ToolTip>
</Grid>
<Grid IsEnabled="False" ToolTipService.ShowOnDisabled="True">
<Border Width="180" Height="180"
Margin="10" Background="Transparent"
BorderBrush="White" BorderThickness="2" Opacity="1.0">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Color="Blue" Opacity="1" BlurRadius="20"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="4"/>
</Border>
<Grid.ToolTip>
<local:HeaderedToolTip HeaderText="My second fantastic header."
ContentText="Some tooltip text. This could get really, really long."
IconVisibility="Collapsed"/>
</Grid.ToolTip>
</Grid>
</StackPanel>
That's it. Here's a look at the tooltip in action. Please excuse my vector paragraph image in place of an actual Info icon.
Of course, in your actual implementation, data like the header's tooltip and contents will be driven from ViewModel data binding.
If you want to allow a custom icon for each use of the HeaderedToolTip, you would add an Image as another DependencyProperty on the custom control class and as another TemplatePart in the ResourceDictionary.
That's all for this WPF Tip. You can take any of these concepts and apply them to other custom controls you may need in your own applications. For more information about creating controls, check out Microsoft Docs.
Happy coding!
Did you know that soon you will be able to build and run your WPF (and UWP & WinForms) applications against .NET Core?
At the Microsoft Build conference in May, it was announced that the .NET team was working on some Windows-only "Desktop Packs" that could be installed on top of .NET Core v3.0. These packs would include:
This will bring the benefits of .NET Core to desktop client applications running on Windows. In my opinion, the biggest benefits of porting your desktop app to .NET Core will be significant performance gains and full access to Windows 10 APIs.
Obviously, in most cases, it won't be as simple as changing a project property and rebuilding your app. Project files will need to be upgraded to .NET Core format, and some legacy APIs will not be available, even in the Desktop Pack packages. This week, it has become more clear exactly which APIs will not be available in .NET Core 3.0 with Desktop Packs.
On Wednesday, the .NET team released a Portability Analyzer tool to scan your .NET desktop applications and determine how ready they are to upgrade to .NET Core 3.0. The tool will scan your .NET binaries and dependencies and produce an Excel report (PortabilityReport.xlsx) with several tabs:
Portability Summary - This sheet contains a list of the assemblies scanned, their current .NET version target, and the % compatibility they are expected to have with .NET Core 3.0.
Details - This sheet provides details on exactly which target type and member are currently used by one of your assemblies that is not compatible with .NET Core 3.0. There is a column for Recommended Changes, but none of my incompatibilities had any recommendations.
Missing assemblies - If your assemblies reference any other assemblies which could not be resolved by the tool, they will be listed here.
I ran the tool on a large application with a mix of WinForms and WPF windows. The folder contains over 900 DLLs. My thoughts:
First, I was pleasantly surprised at how fast the tool ran its analysis. It completed scanning this large application in less than a minute. I was expecting to go get a cup of coffee and a snack while it ran.
Second, the team has really included a lot of desktop APIs in these packs. I was not expecting so many of my DLLs to report at 100% compatible.
Third, many of the incompatible APIs are somewhat expected. Here are a few that came back in the report here:
If you would prefer to run the analyzer against several applications and product individual reports for each, you can use a console analyzer with a batch file or PowerShell script instead. That version is available here, and instructions for using it are in the .NET team's post about the Portability Analyzer.
Go get your app ready for .NET Core 3.0 today! Your users will thank you later.
<xctk:IconButton Content="Launch Me" Padding="4" HorizontalAlignment="Center" VerticalAlignment="Center" IconLocation="Right"> <xctk:IconButton.Icon> <Image Source="/WpfApp1;component/Images/Launchpad_Icon.png" Width="16" Margin="4,0,0,0"/> </xctk:IconButton.Icon> </xctk:IconButton>
<Grid>
<tk:MagnifierManager.Magnifier>
<tk:Magnifier BorderBrush="MediumPurple"
BorderThickness="2"
Radius="80"
ZoomFactor=".4" />
</tk:MagnifierManager.Magnifier>
<tk:CheckListBox ItemsSource="{Binding Sentences, IsAsync=True}"
SelectedItem="{Binding SelectedSentence}"
Command="{Binding ItemSelectedCommand}"/>
<tk:CheckListBox ItemsSource="{Binding Sentences, IsAsync=True}"
SelectedItem="{Binding SelectedSentence}"
Command="{Binding ItemSelectedCommand}"/>
<tk:BusyIndicator IsBusy="{Binding IsGridLoading}" BusyContent="Loading, please wait..." DisplayAfter="0">
<DataGrid local:Commands.DataGridDoubleClickCommand="{Binding GridDoubleClickCommand}" ItemsSource="{Binding Sentences, IsAsync=True}"/>
</tk:BusyIndicator>
private async void OnGridDoubleClicked()
{
//set the IsBusy before you start the thread
IsGridLoading = true;
RaisePropertyChanged(nameof(IsGridLoading));
//no direct interaction with the UI is allowed from this method
lock (_sentenceLock)
{
Sentences.Clear();
}
await BuildSentenceList(5, 15, 25, 50);
//work has completed. you can now interact with the UI
IsGridLoading = false;
RaisePropertyChanged(nameof(IsGridLoading));
}
BindingOperations.EnableCollectionSynchronization(Sentences, _sentenceLock);
private async Task BuildSentenceList(int minWords, int maxWords,
int minSentences, int maxSentences)
{
var words = new[]{"bacon", "ipsum", "dolor", "tail", "amet", "swine",
"chicken", "short", "loin", "jowl", "turkey", "ball", "tip",
"beef", "shank", "rump", "t-bone", "ham", "porchetta", "filet",
"pork", "jerky", "hock", "meatball", "biltong", "steak", "brisket"};
var rand = new Random();
int numSentences = rand.Next(maxSentences - minSentences)
+ minSentences + 1;
int numWords = rand.Next(maxWords - minWords) + minWords + 1;
var result = new StringBuilder();
Task t = Task.Run(() =>
{
for (int s = 0; s < numSentences; s++)
{
for (int w = 0; w < numWords; w++)
{
if (w > 0)
{
result.Append(" ");
}
result.Append(words[rand.Next(words.Length)]);
}
result.Append(". ");
lock (_sentenceLock)
Sentences.Add(new Sentence() {SentenceContent = result.ToString()});
Thread.Sleep(100);
result.Clear();
}
});
await t;
}
<StackPanel Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Top">
<Button Content="Toggle Window 1" Height="40" Width="120" Margin="2" Command="{Binding ButtonOneCommand}"/>
<Button Content="Toggle Window 2" Height="40" Width="120" Margin="2" Command="{Binding ButtonTwoCommand}"/>
<Button Content="Toggle Window 3" Height="40" Width="120" Margin="2" Click="ButtonBase_OnClick"/>
</StackPanel>
<tk:WindowContainer Grid.Row="2">
<tk:ChildWindow WindowBackground="Blue"
Left="75"
Top="50"
Width="275"
Height="125" WindowState="{Binding WindowOneState}">
<TextBlock Text="This is a child window" Padding="10"/>
</tk:ChildWindow>
<tk:ChildWindow WindowBackground="Green"
Left="175"
Top="125"
Width="275"
Height="125" WindowState="{Binding WindowTwoState}">
<StackPanel>
<TextBlock Text="This is a child window with a checkbox." Padding="10"/>
<CheckBox Content="Check me!" Margin="8"/>
</StackPanel>
</tk:ChildWindow>
<tk:MessageBox Caption="Toolkit Message" x:Name="SampleMsgBox"
Text="You have an alert!"/>
</tk:WindowContainer>
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
SampleMsgBox.ShowMessageBox();
}
private void OnButtonOneClicked()
{
if (WindowOneState == WindowState.Open)
WindowOneState = WindowState.Closed;
else
WindowOneState = WindowState.Open;
RaisePropertyChanged(nameof(WindowOneState));
}
public RelayCommand ButtonOneCommand { get; private set; }
private void OnButtonTwoClicked()
{
if (WindowTwoState == WindowState.Open)
WindowTwoState = WindowState.Closed;
else
WindowTwoState = WindowState.Open;
RaisePropertyChanged(nameof(WindowTwoState));
}
public RelayCommand ButtonTwoCommand { get; private set; }
Hello WPF fans! You may have noticed that I am a fan of Xceed's free Extended WPF Toolkit. I am actually a huge fan of free tools and productivity gains in general.
This week when I started working on WPF Tip #16, I was pleased to notice that Xceed has released v3.1 of the Extended WPF Toolkit and moved the source code from CodePlex to GitHub! The move to GitHub was, of course, motivated by Microsoft announcement that CodePlex is shutting down in the coming months.
The changelog for v3.1.0 includes 37 fixes and enhancements. The Plus Edition snagged an additional 19 fixes and improvements including a Windows 10 theme, but Plus received v3.1.0 last year. It pays to pay, it seems.
Learn all about the toolkit on GitHub or check out WPF Tip #11. This tip was my introductory post about the controls. And be sure to stay tuned for more WPF Tips about these controls and lots more!
Happy coding!
<tk:CalculatorUpDown Grid.Row="1" Height="32" VerticalAlignment="Top" FormatString="C2" Watermark="Calculate!" Increment=".01" Maximum="9999.99" Minimum="0.01"/>Upon first launching the window, this is how the control looks:
In Tip #12, we used a ColorCanvas control in a SplitButton to change the Background color of the SplitButton using an event in the code behind. In this tip, we will do the same thing with data binding and commands using MVVMLight.
The first step is to add the MVVMLight NuGet package to the project:
Adding the package will add and update several classes in the project. We now have a MainViewModel and ViewModelLocator inside a ViewModel folder. The locator class exposes each ViewModel in the project so they can be bound in your views. To make the locator discoverable to the views in the project, MVVMLight added a new resource to the App.xaml:
<Application.Resources>
<ResourceDictionary>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:WpfApp1.ViewModel" />
</ResourceDictionary>
</Application.Resources>
Now lets start with the changes we have to make. First remove the event handler from the MainWindow.xaml.cs. The next step is to replace that functionality with some decoupled logic in the MainViewModel. Two things are needed:
An OnColorChanged method is added to do the work needed when the RelayCommand is invoked. These are hooked up in the constructor, along with some default colors for the SplitButton. I made the button different colors at design-time and runtime as a way to validate that my binding code isn't broken. Here's the complete MainViewModel implementation:
public class MainViewModel : ViewModelBase
{
public MainViewModel()
{
if (IsInDesignMode)
{
ButtonBrush = new SolidColorBrush(Colors.LightGray);
}
else
{
ButtonBrush = new SolidColorBrush(Colors.LightSkyBlue);ChangeBrushColorCommand = new RelayCommand<Color?>(OnColorChanged);
}
}public SolidColorBrush ButtonBrush { get; set; }
internal void OnColorChanged(Color? p_Param)
{
if (p_Param.HasValue)
{
ButtonBrush = new SolidColorBrush(p_Param.Value);
}
else
{
ButtonBrush = new SolidColorBrush(Colors.Transparent);
}RaisePropertyChanged(nameof(ButtonBrush));
}public RelayCommand<Color?> ChangeBrushColorCommand { get; private set; }
}
The next thing we need is a converter class to convert the event args of the ColorChanged event to the Color? parameter type of our RelayCommand. SelectedColorChangedToColorConverter implements the IEventArgsConverter in MvvmLight. It's similar to value converters you may have created for data binding in WPF (see WPF Tip #4).
public class SelectedColorChangedToColorConverter : IEventArgsConverter
{
public object Convert(object value, object parameter)
{
var args = (RoutedPropertyChangedEventArgs<Color?>)value;return args.NewValue ?? Colors.Transparent;
}
}
Finally, lets make a few changes to the MainWindow view.
Set the DataContext for the Window using the ViewModelLocator:
DataContext="{Binding Main, Source={StaticResource Locator}}"
Add the converter to the Window.Resources:
<Window.Resources>
<ResourceDictionary>
<local:SelectedColorChangedToColorConverter x:Key="SelectedColorChangedToColorConverter" />
</ResourceDictionary>
</Window.Resources>
Update the SplitButton to bind its Background property and the ColorCanvas to use the MVVMLight EventToCommand trigger, hooking up our RelayCommand through the converter.
<tk:SplitButton Content="Pick a Color" Height="32" Width="120" Background="{Binding ButtonBrush}">
<tk:SplitButton.DropDownContent>
<tk:ColorCanvas x:Name="MainColorCanvas">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectedColorChanged">
<command:EventToCommand Command="{Binding ChangeBrushColorCommand, Mode=OneWay}"
EventArgsConverter="{StaticResource SelectedColorChangedToColorConverter}"
PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</tk:ColorCanvas>
</tk:SplitButton.DropDownContent>
</tk:SplitButton>
That's it!. Same functionality, but now with better separation between view and code.
Happy coding! (P.S. - I hope to get some proper code formatting hooked up to Blogger soon… or maybe a new blogging platform. Thanks for bearing with me.)
Last time in Tip #11, I explained the Extended WPF Toolkit and the different versions that are available. In the quick-n-dirty example, I added a SplitButton with a ColorCanvas that displays when opening the dropdown portion of the buttom.
In this tip, we are going to add just a few lines of code to take the color selected in the ColorCanvas and apply it as the background color of the SplitButton.
Let's start with the Xaml. There are two changes needed here (highlighted below). The first is to name the button so it can be referenced from the application's code. The second is adding a handler to the ColorCanvas' SelectedColorChanged event. This event fires every time the color changes on the canvas and provides the OldValue and NewValue as parameters in the event.
<tk:SplitButton x:Name="mainSplitButton" Content="Pick a Color" Height="32" Width="120">
<tk:SplitButton.DropDownContent>
<tk:ColorCanvas SelectedColorChanged="ColorCanvas_OnSelectedColorChanged" />
</tk:SplitButton.DropDownContent>
</tk:SplitButton>
In the code behind for the Window, I have added the ColorCanvas_OnSelectedColorChanged event handler with some code to set the SplitButton's background color to a new SolidColorBrush the color of the NewValue selected on the ColorCanvas, provided it's not null.
private void ColorCanvas_OnSelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<Color?> e)
{
if (e.NewValue.HasValue)
{
mainSplitButton.Background = new SolidColorBrush(e.NewValue.Value);
}
}
You could add an else condition to handle nulls by setting the background color back to some default color. Here's what the end result looks like.
If you were following the MVVM pattern in your application, you would handle this through data binding and commands. In Tip #13, we will add MVVMLight to the mix and rework the example to follow this pattern.
<Window x:Class="WpfApp1.MainWindow"The end result when running the app looks like this with the button open:
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"
xmlns:local="clr-namespace:WpfApp1"
xmlns:tk="http://schemas.xceed.com/wpf/xaml/toolkit"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<tk:SplitButton Content="Pick a Color" Height="32" Width="120">
<tk:SplitButton.DropDownContent>
<tk:ColorCanvas />
</tk:SplitButton.DropDownContent>
</tk:SplitButton>
</Grid>
</Window>
Pete Brown has a detailed blog post about updating ObservableCollection from background threads. I wanted to share the link to his post from 2012 and share a quick code snippet that illustrates how to do this in .NET 4.5 and later.
Before .NET 4.5, background updates to an ObservableCollection had to dispatch calls to the UI thread. Now all that is required is making a single call after initializing the collection in your ViewModel or other .NET class:
public ObservableCollection<MyObservableType> MyObservableCollection { get; set; }
private object _myCollectionLock = new object();
public MainViewModel()
{
MyObservableCollection = new ObservableCollection<MyObservableType>();
BindingOperations.EnableCollectionSynchronization(MyObservableCollection, _myCollectionLock);
}
Go check out Pete's post with the full details.
Cheers!
Tip #9 will examine something that seems like it should work according to the documentation on MSDN, but I have seen it not work as expected.
When using ObservableCollection<T>, if some code in your application needs to react when items are added or removed from the collection the CollectionChanged event can be handled.
private ObservableCollection<Pill> _pills = new ObservableCollection<Pill>();
public MainWindow()
{
InitializeComponent();
Pills.CollectionChanged += Pills_CollectionChanged;
}public ObservableCollection<Pill> Pills
{
get { return _pills; }
set { _pills = value; }
}void Pills_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
// Pills Collection Changed - do something
}
The issue I have encountered with this code is that setting that value of the Pills property directly does not always fire the CollectionChanged event.
Pills = someOtherPillCollection;
What I did to work around this was to remove the property setter and only work with the collection through its properties. In this case, by using Clear() and Concat<T>().
Pills.Clear();
Pills.Concat<Pill>(someOtherPillCollection);
ObservableCollection does not have an AddRange() method. You could write your own extension method to do it, but I prefer to use the LINQ extension method Concat<T>().
Has anyone else seen this same issue?
Today's tip is a quick one. It's about choosing the best panel for the layout of the UIElements in your WPF Window or Control.
Many developers will default to putting everything into a Grid. It's easy. They're flexible and offer many layout options. When a Window is relatively simple and performance is not being analyzed by users or stakeholders, using Grids everywhere might be ok. However, professional WPF developers should make it a practice to learn the differences in features and performance of each panel and choose the best one for a particular layout scenario.
In general, you should first try a StackPanel. If you can accurately lay out your Window with StackPanels without a deep nested web of them, they are the best way to go. They are much faster than Grids in both measurement of elements and layout/arrangement.
There are several other panels included in WPF. These are the most common, ranked from fastest to slowest (in general):
This ranking is based on the accepted answer in this StackOverflow question. If you're interested in reading more about each of the panels and how they 'stack' up in different scenarios, I highly recommend reading the question and top answer.
Cheers!
If mySimpleImage.CanFreeze ThenYes, I'm giving VB some love in today's tip.
' Makes the vector image frozen.
mySimpleImage.Freeze()
End If
<DrawingImage x:Key="SimpleImage" presentationOptions:Freeze="True">
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Red" Thickness="2" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
In Tip #4, we examined the use of IValueConverter with WPF binding. If you are using MulitBinding, a converter class that implements IMultiValueConverter is needed.
Like the IValueConverter, the class must implement Convert and ConvertBack methods. The difference being the multiple values come in as an object[] parameter in Convert() and go back out as an object[] return value in ConvertBack(). The following example takes two string values as input and returns them concatenated with a pipe '|'. It will convert them back using the Split function, assuming your text value contains no other pipes.
public class TextAppendMultiConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return String.Concat(values[0], "|", values[1]);
}public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
return (value as string).Split('|');
}
}
This code will use the converter in a WPF TextBox's Text property MultiBinding.
<TextBox>
<TextBox.Text>
<MultiBinding Converter="{StaticResource TextAppendMultiConverter}" FallbackValue="Busy loading...">
<Binding Path="IntroText"/>
<Binding Path="ContentText"/>
</MultiBinding>
</TextBox.Text>
</TextBox>
The FallbackValue will be displayed if the converter fails or data is unavailable in the attached DataContext.
Next time, we will shift gears away from data binding. Happy coding!
