Nesting a Progress Bar into a Combobox in WPF

Question

Is it possible to nest a Progress bar into a combobox or the other way around. I want to be able to type into the combo box and hit a button and the progress bar shows the progress of the event, like in Windows Explorer.

EDIT: I need the code in Visual Basic.NET 3.5 Thanks.

Answer 1

I had a similar sort of requirement for a different reason (i had a combo that was auto-populating after a network scan). See if this question & answer helps you: WPF ComboBox - showing something different when no items are bound

Answer 2

Here's one way to do it, basically what I've done is:

1. Subclass ComboBox and add IsProgressVisible and ProgressValue dependency properties
2. Add a green rectangle the the ComboBox control template exactly behind the editable area
3. Bind the rectangle visibility to IsProgressVisible and the rectangle width (using a ScaleTransform) to ProgressValue

First the new control code:

public class ProgressCombo : ComboBox
{
    public static readonly DependencyProperty IsProgressVisibleProperty =
        DependencyProperty.Register("IsProgressVisible", typeof(bool), typeof(ProgressCombo));
    public bool IsProgressVisible
    {
        get { return (bool)GetValue(IsProgressVisibleProperty); }
        set { SetValue(IsProgressVisibleProperty, value); }
    }
    public static readonly DependencyProperty ProgressValueProperty =
        DependencyProperty.Register("ProgressValue", typeof(double), typeof(ProgressCombo));
    public double ProgressValue
    {
        get { return (double)GetValue(ProgressValueProperty); }
        set { SetValue(ProgressValueProperty, value); }
    }        
}

There's also a value converter we'll use:

public class FromPercentConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((double)value) / 100;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Now take the combo box sample style from MSDN (.net 3.5 version, not 4) from http://msdn.microsoft.com/en-us/library/ms750638%28VS.90%29.aspx

Add an xmlns:l definition to your own assembly

Now change <Style x:Key="{x:Type ComboBox}" TargetType="ComboBox"> to <Style x:Key="{x:Type l:ProgressCombo}" TargetType="l:ProgressCombo">

Change <ControlTemplate TargetType="l:ComboBox"> To:

<ControlTemplate TargetType="l:ProgressCombo">
    <ControlTemplate.Resources>
        <BooleanToVisibilityConverter x:Key="Bool2Vis"/>
        <l:FromPercentConverter x:Key="FromPercent"/>
    </ControlTemplate.Resources>

Locate the line <ContentPresenter and add before it:

<Rectangle 
    Fill="LightGreen"
    Margin="3,3,23,3"
    Visibility="{TemplateBinding IsProgressVisible, Converter={StaticResource Bool2Vis}}">
    <Rectangle.RenderTransform>
        <ScaleTransform ScaleX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ProgressValue, Converter={StaticResource FromPercent}}"/>
    </Rectangle.RenderTransform>
</Rectangle>

And that's it