Building Better Software - One Line At A Time

Resizing the Select Branches “dialog”/semi-modal Panel in VS 2010 Branch Visualization

PermanentTan — Fri, 09 Jul 2010 18:52:34 GMT

One of the few annoying things about the Select Branches panel in Branch Visualization is that it looks like a modal dialog that cannot be moved or resized. We are going to address this in V.Next! :) Though not resizable, the panel can be “maximized” to fill the container document window to gain more space. Click the maximize button near the top right corner. While maximized, resizing the document window (by resizing VS, for example) also resizes the Select Branch panel. This technique gives you more screen real estate to work with the branch tree, list, and mini view.

Enjoy.

-Tan

Shortcut Keys for VS2010 Branch Visualization

PermanentTan — Fri, 09 Jul 2010 18:37:55 GMT

There are a few shortcut keys that can quite useful inside a branch hierarchy or tracking changes visualization.

In a branch hierarchy visualization, pressing the Insert while on a node with children (+ visible) drops down the child branch selector. Pressing Shift + Insert shows the general branch selection panel. Pressing Delete (x visible) removes the selected branch node. Pressing Home moves the selection to the branch node whose hierarchy is being viewed.

In the tracking changeset visualization, pressing Alt+L switches to the timeline view and pressing Alt+I switches to the hierarchy view. Pressing Home moves the selection to the starting branch (node or bar depending on the view) containing the changeset being tracked.

In both visualizations, the arrow keys move the branch selection. Pressing Control+C copies the visualization to the clipboard.

Enjoy.

-Tan

Go to Changeset from Team Explorer

PermanentTan — Mon, 14 Dec 2009 14:25:00 GMT

In a previous posting, I mentioned that Ctrl+G in VS2010 brings up the new Go to Changeset dialog from the Source Control Explorer. In RTM, Ctrl+G from Team Explorer will also do the same.

Furthermore, we've added another entry for tracking a changeset - directly from the Go to Changeset dialog. Just enter a changeset number and click Track Changeset.

Enjoy.

-Tan

How to convert a Visual Studio 2010 Branch back to a Folder

PermanentTan — Fri, 20 Nov 2009 14:59:19 GMT

Visual Studio 2010 extends the concept of a folder as a “first-class” branch and introduces the tools to convert folders to first-class branches to enable exciting new Branch Visualization and Tracking Changes features. For reference, please see http://blogs.msdn.com/hakane/archive/2009/05/19/enable-branch-visualization-in-upgraded-team-projects-tfs-2010-beta1.aspx and http://msdn.microsoft.com/en-us/library/ms181423(VS.100).aspx.

Source Control Explorer context menu and toolbar have the button to convert a folder to a branch but not one for converting a branch back to a folder. You can find that functionality from the main menu under File > Source Control > Branching and Merging. Note that Reparent is also available there.

Enjoy.

-Tan

Go to Changeset for Visual Studio 2010

PermanentTan — Fri, 20 Nov 2009 13:42:42 GMT

In previous versions of Visual Studio, hitting Ctrl+G from Source Control Explorer brings up the Find Changeset dialog. In VS 2010, Ctrl+G brings up the new Go to Changeset dialog which lets you quickly enter a changeset number and get the changeset details.

In this dialog, you can also hit Ctrl+G again to bring up the Find Changeset dialog. So effectively from Source Control Explorer, one Ctrl+G for “Go to Changeset” and twice for “Find Changeset”.

Enjoy.

-Tan

WPF TreeView Memory Consumption and Performance

PermanentTan — Fri, 20 Nov 2009 13:29:05 GMT

One very simple thing you can do that can significantly reduce the memory consumption and drastically improve performance of a WPF TreeView is to set the following two properties. In XAML, you would do:

<TreeView x:Name=”myTreeView”

VirtualizingStackPanel.IsVirtualizing="True"

VirtualizingStackPanel.VirtualizationMode="Recycling" />

In a simple test of a data-bound TreeView containing just 5000 items, turning on stack panel virtualization reduces the memory overhead from over 110MB to about 2MB. Additionally, the control also gets a performance boost in items’ expand/collapse, selection, scrolling, and general navigation.

The WPF ListView also support these properties but, unlike the TreeView, its VirtualizingStackPanel.IsVirtualizing is already default to True.

Enjoy.

-Tan

Data Bind Using Only Code Behind

PermanentTan — Mon, 22 Jun 2009 00:54:04 GMT

We are all familiar with the use of WPF Binding in XAML. For example, the following lines bind the caption of a Button (variableCaptionButton) to the text of a TextBox (sourceText).

Have there been times when you need to dynamically build or add UI elements from code behind and have a need to also create bindings among those dynamically created UI elements?

Creating binding using only code behind is easy.

Here is the code behind to accomplish the same binding shown in the above XAML code.

Binding binding = new Binding("Text");
binding.Source = sourceText;
variableCaptionButton.SetBinding(Button.ContentProperty, binding);

The Binding instance defines the data source (the “sourceText” TextBox), and which data source property (the “Text” property). SetBinding() connects a binding source to the receiving property on the target element (“variableCaptionButton” button).

Additionally, you can also define a value converter and parameter via the properties, Binding.Converter and Binding.ConverterParameter, respectively.

That’s it!

-Tan

Array as a WPF ConverterParameter

PermanentTan — Fri, 19 Jun 2009 07:31:09 GMT

A WPF value converter accepts a value and an optional parameter. The parameter can be specified in the XAML binding as a string like the following:

Instead of one string, what if you want to pass an array of strings as a converter parameter? What about an array of brushes?

The trick is to specify the binding in its own XAML tag and use Binding.ConverterParameter and Array. Here is an example of how to pass an array of Strings and an array of Brushes into a value converter. Note the uses of Binding, Binding.ConverterParameter, and Array.

        <TextBlock Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Center">
            <TextBlock.Text>
                <Binding ElementName="mySelector" Path="SelectedIndex" Converter="{StaticResource IntToStringMux}">
                    <Binding.ConverterParameter>
                        <x:Array Type="mscor:String">
                            <mscor:String>A selected</mscor:String>
                            <mscor:String>B selected</mscor:String>
                            <mscor:String>C selected</mscor:String>
                            <mscor:String>D selected</mscor:String>
                        </x:Array>
                    </Binding.ConverterParameter>
                </Binding>
            </TextBlock.Text>
            <TextBlock.Background>
                <Binding ElementName="mySelector" Path="SelectedIndex" Converter="{StaticResource IntToBrushMux}">
                    <Binding.ConverterParameter>
                        <x:Array Type="Brush">
                            <SolidColorBrush Color="LawnGreen"/>
                            <SolidColorBrush Color="LightSkyBlue"/>
                            <SolidColorBrush Color="LightCoral"/>
                        </x:Array>
                    </Binding.ConverterParameter>
                </Binding>
            </TextBlock.Background>
        </TextBlock>

For completeness, the implementations for the IntToStringMux and IntToBrushMux converters are also included below.

[ValueConversion(typeof(int), typeof(String))]
public class IntToStringMux : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        String result = String.Empty;
        int itemIndex = 0;
        String[] itemDescriptions = parameter as String[];

        if (value != null && value.GetType() == typeof(int))
        {
            itemIndex = (int)value;
        }

        if (itemDescriptions != null && itemIndex < itemDescriptions.Length)
        {
            result = itemDescriptions[itemIndex];
        }

return result;
}

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

[ValueConversion(typeof(int), typeof(Brush))]
public class IntToBrushMux : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Brush result = Brushes.Red;
        int itemIndex = 0;
        Brush[] brushes = parameter as Brush[];

        if (value != null && value.GetType() == typeof(int))
        {
            itemIndex = (int)value;
        }

        if (brushes != null && itemIndex < brushes.Length)
        {
            result = brushes[itemIndex];
        }

return result;
}

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

That’s it!

Hope this helps. -Tan

Setting Initial Focus in XAML

PermanentTan — Thu, 11 Jun 2009 16:34:13 GMT

Last time we looked at a tricky problem of setting the initial focus to a specific item in a populated WPF ListView. Most of the time, however, we just want to set the initial focus to a control (like a TextBox or a Button) in our UI. There are a couple of ways to accomplish this.

Hook the Window’s Loaded event and set the focus to the desired control in the code-behind handler
Use FocusManager.FocusedElement

The second solution is easier and can all be done in XAML. For example:

<Window …

FocusManager.FocusedElement="{Binding ElementName=myTextBox}">

…

</Window>

Hope this helps. -Tan

Setting the Initial Focus to a ListView item

PermanentTan — Wed, 29 Apr 2009 20:03:42 GMT

This blog describes the steps needed to set the initial keyboard focus to an item in a WPF ListView. The items in the list can be static or data bound. The trick is to access the ListViewItem associated with an item and then set keyboard focus to it.

The following are snippets of the code behind for a dialog with a ListView named myListView and selecting and setting the initial focus to the last item in the list.

Sample Code to Populate the ListView

The for loop populates the list view with some sample items. Note the call to FocusAndSelectItem().

public Window1()
{
InitializeComponent();

    // Add the items
    int itemCount = 50;
    for (int i = 0; i < itemCount; i++)
    {
        ListViewItem item = new ListViewItem();
        item.Content = String.Format(CultureInfo.CurrentCulture, "Item {0}", i);
        myListView.Items.Add(item);
    }

// Focus and select the last item
FocusAndSelectItem(itemCount - 1);
}

Setting Focus to a ListViewItem

Because the list view and its items may not even be visible when they are created, the code cannot just access the list view item and immediately sets keyboard focus to it. We actually have to defer the focus setting by calling Dispatcher.BeginInvoke() to call back when the application has completed all its initial work and has reached the idle state. FocusAndSelectItem() does this.

In the actual method to set the keyboard focus TryFocusAndSelectItem(), note that we need to ensure that the list view item is visible by calling ScrollIntoView() before setting focus to it.

/// <summary>
/// Request the focus to be set on the specified list view item
/// </summary>
/// <param name="itemIndex">index of item to receive the initial focus</param>
private void FocusAndSelectItem(int itemIndex)
{
Dispatcher.BeginInvoke(new FocusAndSelectItemDelegate(TryFocusAndSelectItem), DispatcherPriority.ApplicationIdle, itemIndex);
}

/// <summary>
/// Make sure a list view item is within the visible area of the list view
/// and then select and set focus to it.
/// </summary>
/// <param name="itemIndex">index of item</param>
private void TryFocusAndSelectItem(int itemIndex)
{
    ListViewItem lvi = myListView.Items.GetItemAt(itemIndex) as ListViewItem;
    if (lvi != null)
    {
        myListView.ScrollIntoView(lvi);
        lvi.IsSelected = true;
        Keyboard.Focus(lvi);
    }
}

private delegate void FocusAndSelectItemDelegate(int itemIndex);

That’s it. Hope this helps.

-Tan