SpectrumColorPicker opens with the wrong color when a loaded event is attached

Hello!

We are using your SpectrumColorPicker in a Popup. We set the InitialColor and the SelectedColor to our desired values. But as soon as we attach the Loaded/Unloaded event to the color picker or any other element in our color picker usercontrol things get strange: The color picker in the popup shows up with the SelectedColor black. When we remove the loaded event everything works fine.

Here is what we do (sample code for reproduction of the issue):

<Grid>
     <ToggleButton x:Name="button" Margin="92,121,594,261" />
     <Popup StaysOpen="False"
            IsOpen="{Binding IsChecked, ElementName=button}"
            MinWidth="350">
         <Border Background="White"
             BorderBrush="#FFADADAD" BorderThickness="1,1,1,1">
             <wpfApp1:ColorPickerUC></wpfApp1:ColorPickerUC>
         </Border>
     </Popup>
 </Grid>

<UserControl x:Class="WpfApp1.ColorPickerUC"
             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" 
             xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
             xmlns:wpfApp1="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">

    <ScrollViewer Style="{StaticResource SampleVerticalScrollViewerStyle}">
        <StackPanel >

            <TextBlock TextWrapping="Wrap">
		The Shared library contains the <Bold>SpectrumColorPicker</Bold> control in the 
		<Bold>ActiproSoftware.Windows.Controls.ColorSelection</Bold> namespace, perfect for use in
		any application the requires custom color selection.
		<LineBreak />
		<LineBreak />
		This control is displayed below and is constructed of <Bold>SpectrumSlice</Bold> and <Bold>SpectrumSlider</Bold> controls.
		It supports display of an initial color, selected color, and the color currently being selected by the mouse.
		The color selection can be made via a hue-based slider and slice combination.
		<LineBreak />
		<LineBreak />
		In addition, the <Bold>ColorComponentSlider</Bold> is shown which can be used to alter a single component of the ARGB color.
            </TextBlock>

            <Grid Margin="0,20,0,0">
                <Grid.Resources>
                    <shared:ColorToStringConverter x:Key="ColorToStringConverter" />
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <shared:SpectrumColorPicker x:Name="spectrumColorPicker" Grid.RowSpan="6" Margin="0,0,10,0" InitialColor="Red" SelectedColor="Purple" />

                <Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">A:</Label>
                <TextBox Grid.Row="0" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" MinWidth="30" MaxLength="3" 
			Text="{Binding ElementName=spectrumColorPicker, Path=A}" />
                <shared:ColorComponentSlider Grid.Row="0" Grid.Column="3" Margin="3" Width="255"
				SelectedColor="{Binding ElementName=spectrumColorPicker, Path=SelectedColor}" Component="Alpha" />

                <Label Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">R:</Label>
                <TextBox Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" MinWidth="30" MaxLength="3" 
			Text="{Binding ElementName=spectrumColorPicker, Path=R}" />
                <shared:ColorComponentSlider Grid.Row="1" Grid.Column="3" Margin="3" Width="255"
				SelectedColor="{Binding ElementName=spectrumColorPicker, Path=SelectedColor}" Component="Red" />

                <Label Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">G:</Label>
                <TextBox Grid.Row="2" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" MinWidth="30" MaxLength="3" 
			Text="{Binding ElementName=spectrumColorPicker, Path=G}" />
                <shared:ColorComponentSlider Grid.Row="2" Grid.Column="3" Margin="3" Width="255"
				SelectedColor="{Binding ElementName=spectrumColorPicker, Path=SelectedColor}" Component="Green" />

                <Label Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">B:</Label>
                <TextBox Grid.Row="3" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" MinWidth="30" MaxLength="3" 
			Text="{Binding ElementName=spectrumColorPicker, Path=B}"></TextBox>
                <shared:ColorComponentSlider Grid.Row="3" Grid.Column="3" Margin="3" Width="255"
				SelectedColor="{Binding ElementName=spectrumColorPicker, Path=SelectedColor}" Component="Blue" />

                <TextBox Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Center" 
			Margin="0,0,0,21" MinWidth="70" MaxLength="9" x:Name="TextBox" Loaded="TextBox_OnLoaded"
			Text="{Binding ElementName=spectrumColorPicker, Path=SelectedColor, Converter={StaticResource ColorToStringConverter}, ConverterParameter=False}" />

            </Grid>

            <TextBlock Margin="0,20,0,0" Style="{StaticResource DocumentHeadingTextBlockStyle}">Options</TextBlock>
            <CheckBox Margin="0,10,0,0" IsChecked="{Binding ElementName=spectrumColorPicker, Path=IsInitialColorVisible}">Initial color visible</CheckBox>
            <CheckBox Margin="0,5,0,0" IsChecked="{Binding ElementName=spectrumColorPicker, Path=IsColorSwatchRowVisible}">Color swatch row visible</CheckBox>

        </StackPanel>
    </ScrollViewer>

</UserControl>

I hope you can see what is going wrong here. Why is the Loaded/Unloaded-Event of the TextBox causing issues?

Thanks in advance for your help.

Best regards

Pascal Oberschachtsiek