Show hexadecimal color and not the name

I would like to be able to visualize the hexadecimal code of the color and not the name, is there a way to do this?

Thank you

colorpicker.png


2 Replies 1 reply marked as answer

MR Miguel Rojas November 13, 2023 09:32 PM UTC

Well, I found the way, I'll leave it here in case anyone needs it.


Original datatemplate:

<DataTemplate x:Key="defaultHeaderTemplate" DataType="shared:ColorPicker">
        <StackPanel Orientation="Horizontal">
            <Border
                Name="selectedColorRect"
                Width="20"
                Height="20"
                Margin="2"
                HorizontalAlignment="Left"
                Background="{Binding Brush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}"
                CornerRadius="{StaticResource MaterialDarkM1.ThemeCornerRadiusVariant1}"/>
            <TextBlock
                Name="SelectedColorText"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Foreground="{StaticResource ContentForeground}"
                Margin="0">
                <TextBlock.Text>
                    <MultiBinding Converter="{StaticResource brushToTextConverter}">
                        <Binding Path="Brush" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}" />
                        <Binding Path="Color" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}" />
                        <Binding Path="GradientBrushDisplayMode" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
        <DataTemplate.Triggers>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding BrushMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="Solid" />
                    <Condition Binding="{Binding Color.A, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="0" />
                </MultiDataTrigger.Conditions>
                <MultiDataTrigger.Setters>
                    <Setter TargetName="selectedColorRect" Property="Background" Value="{StaticResource TransparentBrush}" />
                </MultiDataTrigger.Setters>
            </MultiDataTrigger>
            <DataTrigger Binding="{Binding Brush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="{x:Null}">
                <Setter TargetName="selectedColorRect" Property="Background" Value="{StaticResource NullBrush}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="False">
                <Setter TargetName="SelectedColorText" Property="Foreground" Value="{StaticResource DisabledForeground}" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

    Modified datatemplate :


    <DataTemplate x:Key="defaultHeaderTemplate" DataType="shared:ColorPicker">
        <StackPanel Orientation="Horizontal">
            <Border
                Name="selectedColorRect"
                Width="20"
                Height="20"
                Margin="2"
                HorizontalAlignment="Left"
                Background="{Binding Brush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}"
                CornerRadius="{StaticResource MaterialDarkM1.ThemeCornerRadiusVariant1}"/>
            <TextBlock
                Name="SelectedColorText"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Foreground="{StaticResource ContentForeground}"
                Margin="0"
                Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}, Path=Color}"
                />
        </StackPanel>
        <DataTemplate.Triggers>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding BrushMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="Solid" />
                    <Condition Binding="{Binding Color.A, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="0" />
                </MultiDataTrigger.Conditions>
                <MultiDataTrigger.Setters>
                    <Setter TargetName="selectedColorRect" Property="Background" Value="{StaticResource TransparentBrush}" />
                </MultiDataTrigger.Setters>
            </MultiDataTrigger>
            <DataTrigger Binding="{Binding Brush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="{x:Null}">
                <Setter TargetName="selectedColorRect" Property="Background" Value="{StaticResource NullBrush}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shared:ColorPicker}}}" Value="False">
                <Setter TargetName="SelectedColorText" Property="Foreground" Value="{StaticResource DisabledForeground}" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
 

Marked as answer

BA BagavathiPerumal Apranandham Syncfusion Team November 15, 2023 10:59 AM UTC

Hi Miguel Rojas,



Glad that your issue is resolved!! Please get back to us if you need any further assistance.




Regards,
Bagavathi Perumal A


Loader.
Up arrow icon