C# How to use the Border.BackgroundSizing and Border.BackgroundTransition properties in C#

[jv1597]

Hi all,
I'm working on a lab to get background sizing and transition accomplished on a couple of rectangle objects using C# to get it done. It seems to be working to some extent, but I haven't figured out how to get the duration settings to work with the property.

Here's what I have so far in Xaml... a simple grid, and a button flyout containing two rectangle objects for entered/exited functionality:

<Grid x:Name="mg" Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">

    <Button x:Name="g" Width="200" Height="30" Content="Click for Flyout" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Coral">
        <Button.Flyout>
            <Flyout Placement="Bottom">
                
                <Grid Width="300" Height="150" CornerRadius="7" Background="Beige" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <StackPanel Width="Auto" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="1">
                        
                        <Border x:Name="b1" Width="150" Height="80" BorderThickness="1" BorderBrush="Transparent" Background="Transparent">
                            <Border.BackgroundTransition>
                                <BrushTransition />
                            </Border.BackgroundTransition>
                            <Rectangle x:Name="r1" Width="100" Height="30" Fill="DarkGoldenrod" HorizontalAlignment="Center" VerticalAlignment="Center" PointerEntered="{x:Bind Entered}" PointerExited="{x:Bind Exited}"></Rectangle>
                        </Border>

                        <Border x:Name="b2" Width="150" Height="80" BorderThickness="1" BorderBrush="Transparent" Background="Transparent">
                            <Border.BackgroundTransition>
                                <BrushTransition />
                            </Border.BackgroundTransition>
                            <Rectangle x:Name="r2" Width="100" Height="30" Fill="PaleVioletRed" HorizontalAlignment="Center" VerticalAlignment="Center" PointerEntered="{x:Bind Entered}" PointerExited="{x:Bind Exited}"></Rectangle>
                        </Border>
                        
                    </StackPanel>
                </Grid>
                
            </Flyout>
        </Button.Flyout>
    </Button>
    
</Grid>

Here's what I have so far in the code behind in C#... just 'Entered' and 'Exited' functions for the rectangles; the functions of which contain the BackgroundSizing/BackgroundTransition code:

public sealed partial class MainWindow
{
    public Microsoft.UI.Xaml.Media.Brush Background { get; set; }
    public BackgroundSizing BackgroundSizing { get; set; }
    public BrushTransition BackgroundTransition { get; set; }
    public System.TimeSpan Duration { get; set; }

    public void Entered(object sender, RoutedEventArgs e)
    {
        Microsoft.UI.Xaml.Shapes.Rectangle _r = sender as Microsoft.UI.Xaml.Shapes.Rectangle;
        BackgroundSizing bs = new BackgroundSizing();
        BrushTransition bt = new BrushTransition();
        
        if (_r == r1)
        {
            r1.Stroke = new SolidColorBrush(Colors.Purple);
            r1.StrokeThickness = 2;
            
            b1.BackgroundSizing = bs;
            b1.BackgroundTransition = bt;
            
            b1.Background = new SolidColorBrush(Colors.DarkGray);
        }
        else if (_r == r2)
        {
            r2.Stroke = new SolidColorBrush(Colors.Purple);
            r2.StrokeThickness = 2;

            b2.BackgroundSizing = bs;
            b2.BackgroundTransition = bt;
            
            b2.Background = new SolidColorBrush(Colors.DarkGray);
        }
        else { return; }
    }

    public void Exited(object sender, RoutedEventArgs e)
    {
        Microsoft.UI.Xaml.Shapes.Rectangle _r = sender as Microsoft.UI.Xaml.Shapes.Rectangle;
        if (_r == r1)
        {
            b1.Background = new SolidColorBrush(Colors.Transparent);
            r1.Stroke = new SolidColorBrush(Colors.Transparent);
            r1.StrokeThickness = .5;
        }
        else if ( _r == r2)
        {
            b2.Background = new SolidColorBrush(Colors.Transparent);
            r2.Stroke = new SolidColorBrush(Colors.Transparent);
            r2.StrokeThickness = .5;
        }
        else { return; }
    }
}

I would like to be able to change the 'BackgroundSizing' and 'BackgroundTransition' properties programmatically in C#, but I haven't found enough info on this to get it working. Does anyone have any ideas?

 

[cbreemer]

I'd like to try this out but it does not look to me like the C# code is complete (no Main ?).
Could you please check and/or post complete code ?

 

[jv1597]

Sorry, I forgot I split my code into two files for clarification. I have a MainWindow.xaml.cs and a Entered-Exited.cs class file which holds the entry and exit functions for the flyout:

In MainWindow.xaml.cs:

using Microsoft.UI;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media;



namespace RectButtons_Lab
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        public void Pressed(object sender, RoutedEventArgs e)
        {
            Microsoft.UI.Xaml.Shapes.Rectangle _r = sender as Microsoft.UI.Xaml.Shapes.Rectangle;
            if (_r == r1)
            {
                r1.Fill = new SolidColorBrush(Colors.Blue);
            }
            else if (_r == r2)
            {
                r2.Fill = new SolidColorBrush(Colors.Red);
            }
        }
    }
}

In Entered-Exited.cs:

using Microsoft.UI;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Controls;



namespace RectButtons_Lab
{
    public sealed partial class MainWindow
    {
        public Microsoft.UI.Xaml.Media.Brush Background { get; set; }
        public BackgroundSizing BackgroundSizing { get; set; }
        public BrushTransition BackgroundTransition { get; set; }
        public System.TimeSpan Duration { get; set; }

        public void Entered(object sender, RoutedEventArgs e)
        {
            Microsoft.UI.Xaml.Shapes.Rectangle _r = sender as Microsoft.UI.Xaml.Shapes.Rectangle;
            BackgroundSizing bs = new BackgroundSizing();
            BrushTransition bt = new BrushTransition();
            
            if (_r == r1)
            {
                r1.Stroke = new SolidColorBrush(Colors.Purple);
                r1.StrokeThickness = 2;

                b1.BackgroundSizing = bs;
                b1.BackgroundTransition = bt;
                
                b1.Background = new SolidColorBrush(Colors.DarkGray);
            }
            else if (_r == r2)
            {
                r2.Stroke = new SolidColorBrush(Colors.Purple);
                r2.StrokeThickness = 2;

                b2.BackgroundSizing = bs;
                b2.BackgroundTransition = bt;
                
                b2.Background = new SolidColorBrush(Colors.DarkGray);
            }
            else { return; }
        }

        public void Exited(object sender, RoutedEventArgs e)
        {
            Microsoft.UI.Xaml.Shapes.Rectangle _r = sender as Microsoft.UI.Xaml.Shapes.Rectangle;
            if (_r == r1)
            {
                b1.Background = new SolidColorBrush(Colors.Transparent);
                r1.Fill = new SolidColorBrush(Colors.DarkGoldenrod);
                r1.Stroke = new SolidColorBrush(Colors.Transparent);
                r1.StrokeThickness = .5;
                
            }
            else if ( _r == r2)
            {
                b2.Background = new SolidColorBrush(Colors.Transparent);
                r2.Fill = new SolidColorBrush(Colors.PaleVioletRed);
                r2.Stroke = new SolidColorBrush(Colors.Transparent);
                r2.StrokeThickness = .5;
                
            }
            else { return; }
        }
    }
}

Hope this helps...

 

[jv1597]

I'm working on a 'VisualStateManager' solution,,. Looks like it might work out if it works well enough with WInUI 3.

 

[cbreemer]

Thanks, I'll give that a go. I have been staying clear of XAML so far but this seems an opportunity to learn. Whether I'll be able to help you is another matter... you're probably way ahead of me in C#.

 

[jv1597]

That's ok. Any ideas would be greatly appreciated at this point.

 

[jv1597]

I got a response to my problem recently from experts on StackOverflow. For anyone looking for a solution for animations in WinUI3, you can find the solution here.

 

[cbreemer]

That's good to hear. I probably could not help you anyway. But I can still take this opportunity to learn a bit about XAML.