Unpredictable Style Change by XAML Behaviors (Managed) in UWP

Question

I'm using Microsoft.Xaml.Behaviors.Uwp.Managed NuGet package to control behaviors in my UWP C# app. I have ListView with custom data template like this:

Item:

<ListView 
ItemTemplate="{StaticResource ListViewMessageTemplate_Assistant}" x:Name="MessengerView"
 BorderThickness="2,2,2,2" SelectionMode="None" Margin="10,10,10,10" IsMultiSelectCheckBoxEnabled="False" ScrollViewer.HorizontalScrollBarVisibility="Auto"  
 IsDoubleTapEnabled="False" IsHoldingEnabled="False"
 IsRightTapEnabled="False" IsTapEnabled="False" ContainerContentChanging="MessengerView_ContainerContentChanging" ScrollViewer.VerticalScrollBarVisibility="Auto"/>

Data Template:

   <DataTemplate x:Key="ListViewMessageTemplate_Assistant">
        <Grid x:Name="MainGrid"  MaxWidth="500" Margin="10,0,10,10">
            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>


            <Rectangle x:Name="BackRect" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Grid.RowSpan="2" VerticalAlignment="Stretch" RadiusX="20" RadiusY="20">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{StaticResource Amazonite}"/>
                </Rectangle.Fill>
                <interactivity:Interaction.Behaviors>
                    <core:DataTriggerBehavior x:Name="IsClient" Binding="{Binding Message_style}" ComparisonCondition="Equal" Value="0">
                        <core:ChangePropertyAction x:Name="Blue" PropertyName="Fill" TargetObject="{Binding ElementName=BackRect}" Value="{StaticResource Cola Blue}"/>
                    </core:DataTriggerBehavior>

                    <core:DataTriggerBehavior x:Name="NotIncludesData" Binding="{Binding Message_style}" ComparisonCondition="Equal" Value="1">
                        <core:ChangePropertyAction x:Name="Red" PropertyName="Fill" TargetObject="{Binding ElementName=BackRect}" Value="{StaticResource Crimson Red}"/>
                    </core:DataTriggerBehavior>


                    <core:DataTriggerBehavior x:Name="IsResultBalloon" Binding="{Binding Message_style}" ComparisonCondition="Equal" Value="2">
                        <core:ChangePropertyAction x:Name="Yellow" PropertyName="Fill" TargetObject="{Binding ElementName=BackRect}" Value="{StaticResource American Orange}"/>
                    </core:DataTriggerBehavior>
                </interactivity:Interaction.Behaviors>


            </Rectangle>

            <TextBlock x:Name="MessageText" HorizontalAlignment="Stretch" Margin="20,20,20,20"  TextWrapping="Wrap" VerticalAlignment="Stretch" Text="{Binding Message}" Grid.Row="1" RequestedTheme="Default" Grid.ColumnSpan="2"/>
            <TextBlock x:Name="UserText" HorizontalAlignment="Stretch" Margin="10,10,5,0"  TextWrapping="Wrap" VerticalAlignment="Stretch" Text="{Binding User}" Style="{StaticResource CaptionTextBlockStyle}" FontWeight="Bold" RequestedTheme="Default"/>
            <TextBlock x:Name="DateText" HorizontalAlignment="Stretch" Margin="5,10,10,0"  TextWrapping="Wrap" VerticalAlignment="Stretch" Text="{Binding Message_Time}" Grid.Column="1" TextAlignment="Center" Style="{StaticResource CaptionTextBlockStyle}" FontWeight="Bold" RequestedTheme="Default"/>
        </Grid>
    </DataTemplate>

As you see in the xaml code, the rectangle color changes its color based on given integer value like that:

 MessengerView.Items.Add(new MessageBaloon(("Hello", usr: MessageSender.Assistant, 3))); // Print the result.
 class MessageBaloon
    {
        /// <summary>
        /// Message sender enum types.
        /// </summary>
        public enum MessageSender
        {
            Client,
            Assistant
        }
        private string message;

        private MessageSender message_sender;

        private string message_time;

        private int message_style;



        /// <summary>
        /// Message.
        /// </summary>
        public string Message { get => message; }
        /// <summary>
        /// Get user.
        /// </summary>
        public MessageSender User { get => message_sender; }
        /// <summary>
        /// Time.
        /// </summary>
        public string Message_Time { get => message_time; }
        /// <summary>
        /// Determines message style. 0 for client, 1 for no data from assistant, 2 result from assistant, 3 for normal assistant prompt.
        /// </summary>
        public int Message_style { get => message_style; set => message_style = value; }

        /// <summary>
        /// Creating a message baloon for chat UI based on given datas.
        /// </summary>
        /// <param name="msg">Message string.</param>
        /// <param name="usr">User type. Use MessageSender enum please.</param>
        /// <param name="style_number">  Determines message style. 0 for client, 1 for no data from assistant, 2 result from assistant, 3 for normal assistant prompt. </param>

        public MessageBaloon(string msg, MessageSender usr, int style_number )
        {
            message = msg;
            message_sender = usr;
            message_time = DateTime.Now.ToString();
            message_style = style_number;


        }
    }

However, colors mixed by behavior control for a while as you seen over this text... For example; if a message baloon's color must be light teal based on binding value, for a while it turns blue without code interfere. Can you help me to discover what is causing to this issue ? Thanks.

Answer 1

Adding this behavior into the template seems fix the problem. Before, I don't use a trigger for teal color because I think it is template's default background color and it will not changed if other conditions do not occur.

  <core:DataTriggerBehavior x:Name="IsAssistant" Binding="{Binding Message_style}" ComparisonCondition="Equal" Value="3">
                    <core:ChangePropertyAction x:Name="Green" PropertyName="Fill" TargetObject="{Binding ElementName=BackRect}" Value="{StaticResource Amazonite}"/>
                </core:DataTriggerBehavior>