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

WPF Studio, Themes, and Shared Library for WPF Forum

Posted 7 months ago by P. O. - Inosoft GmbH
Version: 22.1.0
Platform: .NET 4.8
Environment: Windows 11 (64-bit)
Avatar

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

Comments (2)

Answer - Posted 7 months ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello Pascal,

Thanks for reporting this.  Using a Loaded event handler in a UserControl seemed to cause some controls to be loaded by WPF earlier than expected.  We were able to find a workaround for this problem though that will roll into the upcoming v23.1.3 maintenance release.


Actipro Software Support

Posted 7 months ago by P. O. - Inosoft GmbH
Avatar

Thank you very very much for a very fast and convenient solution :)

The latest build of this product (v24.1.1) was released 2 months ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.