Custom Control Style Question Revisited - WPF Discussion Boards

2-Dec-23 7:41

Andre Oosthuizen wrote:
no, we will not be opening your entire project to try and find a solution.

Plenty of others have.

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

DataGrid Exception

Kevin Marois28-Nov-23 11:36

28-Nov-23 11:36

I have a DataGrid that allows users to define CSV file columns for a UI I'm creating. It's bound to an ObservableCollection<columninfoentity>. I have CanUserAddRows = true. Apparantly setting this to True exposes some strange bug.

The grid's first column has a button:

<DataGrid Grid.Row="2"
          Grid.Column="0"
          ItemsSource="{Binding ColumnInfos}"
          HorizontalGridLinesBrush="LightGray"
          VerticalGridLinesBrush="LightGray"
          AutoGenerateColumns="False"
          CanUserAddRows="True"
          CanUserDeleteRows="True"
          CanUserReorderColumns="False"
          CanUserResizeColumns="False"
          CanUserSortColumns="False"
          BorderBrush="SteelBlue"
          BorderThickness="1"
          HeadersVisibility="Column"
          HorizontalScrollBarVisibility="Auto"
          VerticalScrollBarVisibility="Auto"
          VerticalAlignment="Stretch"
          Margin="5,0,5,5">

    <DataGrid.Resources>
        <local:BindingProxy x:Key="proxy" Data="{Binding IsColumnWidthVisibile}"/>
    </DataGrid.Resources>

    <DataGrid.Columns>

        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Command="{Binding DeleteColumnCommand, RelativeSource={RelativeSource FindAncestor,
                                                                    AncestorLevel=1, AncestorType={x:Type Window}}}"
                            CommandParameter="{Binding}"
                            Margin="2"
                            Height="18"
                            Width="18"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTextColumn Header="Column Name"
                            Binding="{Binding ColumnName}"
                            Width="*"/>

        <DataGridTextColumn Header="Width"
                            Binding="{Binding ColumnWidth}"
                            Width="65"
                            Visibility="{Binding Data, Converter={StaticResource boolToVisibilityConverter}, Source={StaticResource proxy}}"/>

    </DataGrid.Columns>

</DataGrid>

When I enable CanUserAddRows it and run the app I get

System.InvalidCastException: 'Unable to cast object of type 'MS.Internal.NamedObject' to type 'WPFDataGrid.ColumnInfoEntity'.'

Strangly, the exception is thrown in the RelayCommand's CanExecute.

If I comment out the delete button everything works fine.

I created a sample project[^] to demonstrate this.

I don't understand what the error means, or why I'm getting it. Any help would be great.

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

modified 28-Nov-23 17:51pm.

Richard Deeming28-Nov-23 22:30

28-Nov-23 22:30

The problem is in your RelayCommand<T> class, which indiscriminately tries to cast the command parameter to the specified type.

Your DeleteCommand is an instance of RelayCommand<ColumnInfoEntity>, so it will try to cast the parameter to the ColumnInfoEntity. But for the "new item" row, the parameter will be passed the CollectionView.NewItemPlaceholder[^] value, which will be an MS.Internal.NamedObject instance. Hence the cast will fail, and your code will crash.

Change the RelayCommand<T> to test whether the parameter is the expected type:

private bool CanExecuteCore(T parameter)
{
    return _canExecute is null || _canExecute(parameter);
}

public bool CanExecute(object parameter)
{
    return parameter is T param && CanExecuteCore(param);
}

public void Execute(object parameter)
{
    if (parameter is T param && CanExecuteCore(param))
    {
        _execute(param);
    }
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois29-Nov-23 7:12

29-Nov-23 7:12

That did it. Thank you!

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Kevin Marois29-Nov-23 8:13

29-Nov-23 8:13

OK, so that works fine now.

Now I added an event trigger to the grid:

<i:EventTrigger EventName="AddingNewItem">
    <i:InvokeCommandAction Command="{Binding NewItemAddedCommand}"
                            CommandParameter="{Binding}"/>
</i:EventTrigger>

When I run this, I get the exception

System.InvalidOperationException: 'Items collection must be empty before using ItemsSource.'

It's thrown in the class ItemCollection.cs.

The ItemSource is set to an ObservableCollection which is loaded in the CTOR.

This is why I hate the DataGrid.

I commited this change. Any thoughts on this?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Richard Deeming29-Nov-23 22:22

29-Nov-23 22:22

You've added the <i:EventTrigger> as a direct child of the grid. Looking at the documentation[^], it should be wrapped in an <i:Interation.Triggers> element instead.

XAML

<DataGrid ...>
    <DataGrid.Resources>
        ...
    </DataGrid.Resources>
    
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="AddingNewItem">
            <i:InvokeCommandAction Command="{Binding NewItemAddedCommand}" CommandParameter="{Binding}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois30-Nov-23 6:46

Custom Control Style Question Revisited

30-Nov-23 6:46

duh. Too many late nights

Thanks

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Kevin Marois30-Oct-23 9:14

Re: Custom Control Style Question Revisited

30-Oct-23 9:14

I've asked about this already, but I'm not really getting it. I'm asking this again with more detail in the hopes that it'll make more sense.

Lets say I develop a custom control that have a TextBlock over a TextBox[^]. I have defind colors for Normal and Mouse Over

Here's the XAML for my control. It's pretty simple:

<pre><ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MyTextBoxEx">

<pre>
<SolidColorBrush x:Key="CaptionNormalColor" Color="Green"/>
<SolidColorBrush x:Key="CaptionMouseOverColor" Color="Purple"/>

<SolidColorBrush x:Key="TextNormalColor" Color="Red"/>
<SolidColorBrush x:Key="TextMouseOverColor" Color="Blue"/>

<Style TargetType="{x:Type local:TextBoxEx}">

    <Setter Property="Padding" Value="1"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type local:TextBoxEx}">

                <StackPanel Orientation="Vertical">

                    <Border Padding="{Binding Padding, RelativeSource={RelativeSource TemplatedParent}}"
                            Margin="{Binding Margin, RelativeSource={RelativeSource TemplatedParent}}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">

                        <StackPanel Orientation="Vertical">

                            <TextBlock x:Name="caption"
                                       Foreground="{StaticResource CaptionNormalColor}"
                                       Text="{TemplateBinding Caption}"/>

                            <TextBox x:Name="text"
                                     Foreground="{StaticResource TextNormalColor}"
                                     Text="{TemplateBinding Text}"/>

                        </StackPanel>

                    </Border>

                </StackPanel>

                <ControlTemplate.Triggers>

                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="caption" Property="TextElement.Foreground" Value="{StaticResource CaptionMouseOverColor}"/>
                        <Setter TargetName="caption" Property="TextElement.FontWeight" Value="Bold"/>

                        <Setter TargetName="text" Property="TextElement.Foreground" Value="{StaticResource TextMouseOverColor}"/>
                        <Setter TargetName="text" Property="TextElement.FontStyle" Value="Italic"/>
                    </Trigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

Here's the question. I have assigned colors for normal, and for the Mouse Over triggers. Assume this control was in a compiled assembly, and I gave it to you, how would you go about overwriting the theme colors, or theming it the way you wanted?

When you buy a third party control, and want apply your theme to it, how do the controls inside get their colors set? In my case, the triggers are set to a specifically named brush. Just knowing the brush names wouldn't help you overwrite the theme colors, would it?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Gerry Schmitz30-Oct-23 12:20

Re: Custom Control Style Question Revisited

30-Oct-23 12:20

Making color changes to parts of controls that already have "part resources" defined in generic.xaml is not customizing; it is annoying.

"Before entering on an understanding, I have meditated for a long time, and have foreseen what might happen. It is not genius which reveals to me suddenly, secretly, what I have to say or to do in a circumstance unexpected by other people; it is reflection, it is meditation." - Napoleon I

Kevin Marois31-Oct-23 8:01

31-Oct-23 8:01

You're missing the point.

When you buy a third party control, like say from Infragistics, and you use it in your app, when you write your own theme the third party control respects it.

I'm trying to understand how to make my control work the same way

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

UI Validation Problem

Kevin Marois10-Oct-23 13:10

10-Oct-23 13:10

I am implementing INotifyDataErrorInfo. Here's my base ViewModel

public class _ViewModelBase : BindableBase, INotifyDataErrorInfo
{
    #region Events
    public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;
    #endregion

    #region Private Fields
    public readonly Dictionary<string, List<string>> _validationErrors = new Dictionary<string, List<string>>();
    #endregion

    #region Properties
    public bool HasErrors => _validationErrors.Any();
    #endregion

    #region Public Methods
    public IEnumerable GetErrors(string propertyName)
    {
        return _validationErrors.ContainsKey(propertyName) ? _validationErrors[propertyName] : null;
    }
    #endregion

    #region Protected Methods
    protected void AddError(string propertyName, string error)
    {
        if (!_validationErrors.ContainsKey(propertyName))
        {
            _validationErrors[propertyName] = new List<string>();
        }

        if (!_validationErrors[propertyName].Contains(error))
        {
            _validationErrors[propertyName].Add(error);
            RaiseErrorsChanged(propertyName);
        }
    }

    protected void ClearErrors(string propertyName)
    {
        if (_validationErrors.ContainsKey(propertyName))
        {
            _validationErrors.Remove(propertyName);
            {
                RaiseErrorsChanged(propertyName);
            }
        }
    }
    #endregion

    #region Private Methods
    private void RaiseErrorsChanged(string propertyName)
    {
        ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));
    }
    #endregion
}

Here's my CustomerView

<TextBlock Grid.Row="0"
           Text="Customer Name"/>
<TextBox Grid.Row="1"
         Grid.Column="0"
         Text="{Binding CustomerName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
         IsEnabled="{Binding AreFieldsEnabled}">

    <Validation.ErrorTemplate>
        <ControlTemplate>
            <StackPanel>
                <AdornedElementPlaceholder x:Name="textBox" />
                <ItemsControl ItemsSource="{Binding}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding ErrorContent}" Foreground="Red" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </ControlTemplate>
    </Validation.ErrorTemplate>

</TextBox>

Here's my CustomerViewModel (parts ommited)

private void Validate()
{
    ClearErrors(nameof(Customer.CustomerName));

    if (string.IsNullOrWhiteSpace(Customer.CustomerName))
    {
        AddError(nameof(Customer.CustomerName), "The Customer Name cannot be empty.");
    }

}

private void Customer_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    IsChanged = true;

    Validate();
    RaiseChangedEvent();
}

The problem is that if I use complex nation, as in Customer.CustomerName instead of just CustomerName, the validation text does not appear. The error gets added to the collection, but I don't see it.

What's wrong here?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Richard Deeming10-Oct-23 22:13

10-Oct-23 22:13

That makes no sense - both nameof(Customer.CustomerName) and nameof(CustomerName) will compile to the constant string "CustomerName".

Are you sure that the view-model property is spelled correctly?

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois12-Oct-23 7:25

12-Oct-23 7:25

OK, so I'm not really sure what the problem is here:

private void Validate()
{
    ClearErrors("CustomerName");

    if (string.IsNullOrWhiteSpace(Customer.CustomerName))
    {
        AddError("CustomerName", "The Customer Name cannot be empty.");
    }
}

<TextBox Grid.Row="1" 
            Grid.Column="0"
            Text="{Binding Customer.CustomerName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
            IsEnabled="{Binding AreFieldsEnabled}">

<pre>
<Validation.ErrorTemplate>
    <ControlTemplate>
        <StackPanel>
            <AdornedElementPlaceholder x:Name="textBox" />
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding ErrorContent}" Foreground="Red" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </ControlTemplate>
</Validation.ErrorTemplate>

The TextBox is bound to Customer.CustomerName. When I remove the text, the error is added, but I don't see anything. I'm guessing I'm not doing this right.

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Richard Deeming12-Oct-23 21:34

12-Oct-23 21:34

The errors don't match the property you're binding to.

Try using:

const string propertyName = $"{nameof(Customer)}.{nameof(Customer.CustomerName)}";

ClearErrors(propertyName);

f (string.IsNullOrWhiteSpace(Customer.CustomerName))
{
    AddError(propertyName, "The Customer Name cannot be empty.");
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Gerry Schmitz12-Oct-23 8:52

12-Oct-23 8:52

Being "in error" is the state of the object in question; not a flag or entry in a list. That's transaction oriented versus "online".

My "HasErrors" runs all the "validations" on the object and returns true or false anytime it is called (e.g. before saving). No "error lists" to clear etc.

You can also retrieve all errors (to show only the first, for example, to avoid overloading thee user).

At the same time, all the textboxes in error are "red lined" as expected.

Kevin Marois12-Oct-23 14:54

12-Oct-23 14:54

See my latest reply to Richard

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Gerry Schmitz12-Oct-23 19:12

12-Oct-23 19:12

I think you have a "ValidatesOn..." mismatch.

https://stackoverflow.com/questions/17254847/what-is-the-difference-between-validatesonnotifydataerrors-and-validatesondataer

Kevin Marois16-Oct-23 12:50

16-Oct-23 12:50

OK, I don't get what's wrong here.

Here's the CustomerName in my CustomerView

<TextBox Grid.Row="1" 
            Grid.Column="0"
            Text="{Binding Customer.CustomerName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnNotifyDataErrors=True}"
            IsEnabled="{Binding AreFieldsEnabled}">

<pre>
<Validation.ErrorTemplate>
    <ControlTemplate>
        <StackPanel>
            <AdornedElementPlaceholder/>
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding ErrorContent}" Foreground="Red" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </ControlTemplate>
</Validation.ErrorTemplate>

Here's the VM

private void Customer_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    IsChanged = true;

    ValidateCustomerName();
}

private void ValidateCustomerName()
{
    ClearErrors(nameof(Customer.CustomerName));

    if (string.IsNullOrWhiteSpace(Customer.CustomerName))
    {
        AddError(nameof(Customer.CustomerName), "The Customer Name cannot be empty.");
    }
}

When I clear out the CustomerName field, the ValidateCustomerName method fires, and the error is added to the errors collection. I just don't see the error text on the UI.

However, if instead of binding to Customer.CustomerName, if I put a string property on the VM called CustomerName and use that, then I see the error text.

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

UI Validation Questions

Kevin Marois29-Sep-23 15:54

Re: UI Validation Questions

29-Sep-23 15:54

I use INotifyDataErrorInfo as in this article[^].

This is a fine for validating individual textboxes.

How would you validate that a list has items in it?
I have 2 comboboxes with the same collection of items in it. How can I validate that they both have differt items selected?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

modified 29-Sep-23 22:06pm.

Richard Deeming1-Oct-23 21:43

Custom Control Style Question

1-Oct-23 21:43

Quote:
GetErrors method returns an IEnumerable that contains validation errors for the specified property (when the propertyName parameter isn’t equal to null or empty string) or for the entire entity (when the propertyName parameter is equal to null or empty string)

If you want to validate multiple properties of your entity, you need to return the errors when the GetErrors method[^] is called with a null property name.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois14-Sep-23 12:35

14-Sep-23 12:35

I am creating a File Picker control, which will have a caption, a textbox, and a button with an image on it. Pretty straightforward. The control will live inside a controls project I have.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Marois.Framework.WPF.Controls">

<pre>
<SolidColorBrush x:Key="disabledBackgroundBrush" Color="Gray"/>

<Style TargetType="{x:Type local:MaroisFilePicker}">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate>

                <Border x:Name="border"
                        Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        CornerRadius="{TemplateBinding BorderThickness}">

                    <Grid>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Text="{Binding Caption}"
                                   x:Name="caption"
                                   Margin="2"/>

                        <TextBox Grid.Column="1"
                                 x:Name="textbox"
                                 Text="{Binding File}"/>

                        <Button Grid.Column="2"
                                x:Name="button"
                                Command="{Binding SelectedFileCommand}"/>

                    </Grid>

                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="button" Property="Background" Value="{StaticResource disabledBackgroundBrush}" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

If you notice, I have defined a background brush for the textbox disabled state.

So here's the question. All of this lives in my Marois.Framework.WPF.Controls library. When I use this in another app, how do I then define different colors for the controls? Do I need all of this xaml in my app? Or do I somehow reference each part of my control in a style?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Gerry Schmitz14-Sep-23 12:57

14-Sep-23 12:57

I pass anything that needs custom ("team") colors, a "custom colors" (team) object at "load" time; with "primary" and "secondary" colors and FG, BG colors, that are bound to at run time. The other option is to use "dynamic" resource references; where you play with the resource (brush) that is referenced.

Kevin Marois15-Sep-23 5:33

15-Sep-23 5:33

I don't understand that at all. Please explain

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

Gerry Schmitz15-Sep-23 5:58

15-Sep-23 5:58

It's probably not "MVVM".

Kevin Marois15-Sep-23 14:54