C#•9mo ago

✅ Help needed with WPF GUI

Hello, Good Day! Overview I just started with WPF a few weeks ago so I'm still quite new to all this, for now I've been trying to create a dashboard UI for my project which has been going good so far, in my dashboard UI I have a grid divided into 3 rows (1 header, 1 footer and 1 for content) and 2 columns (1 for sidebar and one for content). I've created an interactive sidebar, so when you hover over to it, it'll auto expand and show you the button names and everything, when it's collapsed it'll show only the icons of those buttons. Problem So, as the sidebar is interactive, it auto expands when mouse over, but if the main window is resized it and the column 1 (the one with sidebar) has enough space to hold the expanded form of the sidebar, it will expand the sidebar to it's expanded state and will remove the mouse over animations. But if the sidebar's column's width is greater than the collapsed width but still lesser than the expanded width, it leaves a space between the sidebar and the content column, which gives a very inconsistent look to my app. So is there any way to overcome this issue? I'm attaching my xaml and code behind for your better understanding.

100 Replies

remi.nzOP•9mo ago

<Window x:Class="UI_Prototype.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:userControls="clr-namespace:UI_Prototype.UserControls" xmlns:views="clr-namespace:UI_Prototype.Views"
        mc:Ignorable="d" WindowStyle="None" MouseLeftButtonDown="Window_MouseLeftButtonDown"
        AllowsTransparency="True" Background="Transparent" 
        Title="MainWindow" Height="120" Width="120" MinHeight="700" MinWidth="1172">
    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="0" CornerRadius="0" CaptionHeight="0"/>
    </WindowChrome.WindowChrome>
    <Border CornerRadius="25" BorderBrush="Transparent" BorderThickness="0" Padding="6" Background="#161F49">
        <Grid Name="mainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="sidebarCol" Width="0.2*"/>
                <ColumnDefinition x:Name="contentCol"/>
            </Grid.ColumnDefinitions>

<Window x:Class="UI_Prototype.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:userControls="clr-namespace:UI_Prototype.UserControls" xmlns:views="clr-namespace:UI_Prototype.Views"
        mc:Ignorable="d" WindowStyle="None" MouseLeftButtonDown="Window_MouseLeftButtonDown"
        AllowsTransparency="True" Background="Transparent" 
        Title="MainWindow" Height="120" Width="120" MinHeight="700" MinWidth="1172">
    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="0" CornerRadius="0" CaptionHeight="0"/>
    </WindowChrome.WindowChrome>
    <Border CornerRadius="25" BorderBrush="Transparent" BorderThickness="0" Padding="6" Background="#161F49">
        <Grid Name="mainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="sidebarCol" Width="0.2*"/>
                <ColumnDefinition x:Name="contentCol"/>
            </Grid.ColumnDefinitions>

 
            <StackPanel Grid.Column="1" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Grid.Column="1" Name="btnMinimize" Content="_" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMinimize_Click"/>
                <Button Grid.Column="1" Name="btnMaximize" Content="🗖" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMaximize_Click" />
                <Button Grid.Column="1" Name="btnClose" Content="X" Width="40" Height="40" HorizontalAlignment="Right" Click="btnClose_Click"/>
            </StackPanel>
            <userControls:Sidebar x:Name="mySidebar" Grid.Row="1" Grid.Column="0" Margin="15 ,0,0,0" Width="95" Grid.ColumnSpan="2" Panel.ZIndex="99"/>
            <views:Home Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Grid.ColumnSpan="2"/>
        </Grid>
    </Border>
</Window>

 
            <StackPanel Grid.Column="1" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Grid.Column="1" Name="btnMinimize" Content="_" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMinimize_Click"/>
                <Button Grid.Column="1" Name="btnMaximize" Content="🗖" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMaximize_Click" />
                <Button Grid.Column="1" Name="btnClose" Content="X" Width="40" Height="40" HorizontalAlignment="Right" Click="btnClose_Click"/>
            </StackPanel>
            <userControls:Sidebar x:Name="mySidebar" Grid.Row="1" Grid.Column="0" Margin="15 ,0,0,0" Width="95" Grid.ColumnSpan="2" Panel.ZIndex="99"/>
            <views:Home Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Grid.ColumnSpan="2"/>
        </Grid>
    </Border>
</Window>

        public MainWindow()
        {
            InitializeComponent();
            MaxHeight = SystemParameters.MaximizedPrimaryScreenHeight;
            SizeChanged += MainWindow_SizeChanged;
        }

        private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            mySidebar.CheckAndExpand();
        }

        public MainWindow()
        {
            InitializeComponent();
            MaxHeight = SystemParameters.MaximizedPrimaryScreenHeight;
            SizeChanged += MainWindow_SizeChanged;
        }

        private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            mySidebar.CheckAndExpand();
        }

Sidebar.cs

        public void CheckAndExpand()
        {
            var mainWindowGrid = Application.Current.MainWindow.FindName("mainGrid") as Grid;
            if (mainWindowGrid != null)
            {
                var columnWidth = mainWindowGrid.ColumnDefinitions[0].ActualWidth;

                if (columnWidth >= ExpandedWidth)
                {
                    SetWidth(ExpandedWidth);
                    if (eventsAdded)
                    {
                        MouseEnter -= Sidebar_MouseEnter;
                        MouseLeave -= Sidebar_MouseLeave;
                        eventsAdded = false;
                    }
                }
                else
                {
                    SetWidth(CollapsedWidth);
                    if (!eventsAdded)
                    {
                        MouseEnter += Sidebar_MouseEnter;
                        MouseLeave += Sidebar_MouseLeave;
                        eventsAdded = true;
                    }
                }
            }
        }

        public void CheckAndExpand()
        {
            var mainWindowGrid = Application.Current.MainWindow.FindName("mainGrid") as Grid;
            if (mainWindowGrid != null)
            {
                var columnWidth = mainWindowGrid.ColumnDefinitions[0].ActualWidth;

                if (columnWidth >= ExpandedWidth)
                {
                    SetWidth(ExpandedWidth);
                    if (eventsAdded)
                    {
                        MouseEnter -= Sidebar_MouseEnter;
                        MouseLeave -= Sidebar_MouseLeave;
                        eventsAdded = false;
                    }
                }
                else
                {
                    SetWidth(CollapsedWidth);
                    if (!eventsAdded)
                    {
                        MouseEnter += Sidebar_MouseEnter;
                        MouseLeave += Sidebar_MouseLeave;
                        eventsAdded = true;
                    }
                }
            }
        }

leowest•9mo ago

so u want to fix

But if the sidebar's column's width is greater than the collapsed width but still lesser than the expanded width, it leaves a space between the sidebar and the content column, which gives a very inconsistent look to my app

? do u have some screensshot of what it looks like too to give a better idea of even a video/gif Also its missing the mouse enter and leave events among some other things like SetWidth, Expanded Width etc for the spacing I think the problem is the width 95 u have there are a few other inconsistencies I could find but without the rest of the code I can't really fully test it

remi.nzOP•9mo ago

Sure, here's the video

remi.nzOP•9mo ago

sidebar.cs

    public partial class Sidebar : UserControl
    {
        private const double CollapsedWidth = 95;
        private const double ExpandedWidth = 240;
        private bool eventsAdded = false;

        public Sidebar()
        {
            InitializeComponent();

            Width = CollapsedWidth;
            HorizontalAlignment = HorizontalAlignment.Left;
        }
        private void Sidebar_MouseEnter(object sender, MouseEventArgs e)
        {
            AnimateWidth(ExpandedWidth);
            AnimateGlow(250, 0.4);
            container.Opacity = 0.8;
        }

        private void Sidebar_MouseLeave(object sender, MouseEventArgs e)
        {
            AnimateWidth(CollapsedWidth);
            AnimateGlow(0, 0);
            container.Opacity = 1;
        }

        public void CheckAndExpand()
        {
            var mainWindowGrid = Application.Current.MainWindow.FindName("mainGrid") as Grid;
            if (mainWindowGrid != null)
            {
                var columnWidth = mainWindowGrid.ColumnDefinitions[0].ActualWidth;

                if (columnWidth >= ExpandedWidth)
                {
                    SetWidth(ExpandedWidth);
                    if (eventsAdded)
                    {
                        MouseEnter -= Sidebar_MouseEnter;
                        MouseLeave -= Sidebar_MouseLeave;
                        eventsAdded = false;
                    }
                }
                else
                {
                    SetWidth(CollapsedWidth);
                    if (!eventsAdded)
                    {
                        MouseEnter += Sidebar_MouseEnter;
                        MouseLeave += Sidebar_MouseLeave;
                        eventsAdded = true;
                    }
                }
            }
        }

    public partial class Sidebar : UserControl
    {
        private const double CollapsedWidth = 95;
        private const double ExpandedWidth = 240;
        private bool eventsAdded = false;

        public Sidebar()
        {
            InitializeComponent();

            Width = CollapsedWidth;
            HorizontalAlignment = HorizontalAlignment.Left;
        }
        private void Sidebar_MouseEnter(object sender, MouseEventArgs e)
        {
            AnimateWidth(ExpandedWidth);
            AnimateGlow(250, 0.4);
            container.Opacity = 0.8;
        }

        private void Sidebar_MouseLeave(object sender, MouseEventArgs e)
        {
            AnimateWidth(CollapsedWidth);
            AnimateGlow(0, 0);
            container.Opacity = 1;
        }

        public void CheckAndExpand()
        {
            var mainWindowGrid = Application.Current.MainWindow.FindName("mainGrid") as Grid;
            if (mainWindowGrid != null)
            {
                var columnWidth = mainWindowGrid.ColumnDefinitions[0].ActualWidth;

                if (columnWidth >= ExpandedWidth)
                {
                    SetWidth(ExpandedWidth);
                    if (eventsAdded)
                    {
                        MouseEnter -= Sidebar_MouseEnter;
                        MouseLeave -= Sidebar_MouseLeave;
                        eventsAdded = false;
                    }
                }
                else
                {
                    SetWidth(CollapsedWidth);
                    if (!eventsAdded)
                    {
                        MouseEnter += Sidebar_MouseEnter;
                        MouseLeave += Sidebar_MouseLeave;
                        eventsAdded = true;
                    }
                }
            }
        }

        private void AnimateWidth(double newWidth)
        {
            var animation = new DoubleAnimation(newWidth, TimeSpan.FromSeconds(0.2));
            BeginAnimation(WidthProperty, animation);
        }

        private void SetWidth(double newWidth)
        {
            var animation = new DoubleAnimation(newWidth, TimeSpan.FromSeconds(0.1));
            BeginAnimation(WidthProperty, animation);
        }

        private void AnimateGlow(double blurRadius, double opacity)
        {
            var blurAnimation = new DoubleAnimation(blurRadius, TimeSpan.FromSeconds(0.2));
            GlowEffect.BeginAnimation(DropShadowEffect.BlurRadiusProperty, blurAnimation);

            var opacityAnimation = new DoubleAnimation(opacity, TimeSpan.FromSeconds(0.2));
            GlowEffect.BeginAnimation(DropShadowEffect.OpacityProperty, opacityAnimation);

            GlowEffect.Direction = 0;
            GlowEffect.ShadowDepth = 30;
        }
    }

        private void AnimateWidth(double newWidth)
        {
            var animation = new DoubleAnimation(newWidth, TimeSpan.FromSeconds(0.2));
            BeginAnimation(WidthProperty, animation);
        }

        private void SetWidth(double newWidth)
        {
            var animation = new DoubleAnimation(newWidth, TimeSpan.FromSeconds(0.1));
            BeginAnimation(WidthProperty, animation);
        }

        private void AnimateGlow(double blurRadius, double opacity)
        {
            var blurAnimation = new DoubleAnimation(blurRadius, TimeSpan.FromSeconds(0.2));
            GlowEffect.BeginAnimation(DropShadowEffect.BlurRadiusProperty, blurAnimation);

            var opacityAnimation = new DoubleAnimation(opacity, TimeSpan.FromSeconds(0.2));
            GlowEffect.BeginAnimation(DropShadowEffect.OpacityProperty, opacityAnimation);

            GlowEffect.Direction = 0;
            GlowEffect.ShadowDepth = 30;
        }
    }

Sorry for the over saturated video, I don't know what's wrong with my OBS.

leowest•9mo ago

well I did my own partial code to the missing bits not sure if this is the desired outcome ah ok its floating sidebar that makes more sense

remi.nzOP•9mo ago

I guess this it, but the problem is that it's not a smooth animation, I'm guessing you're changing the column width?

leowest•9mo ago

well yeah I did not had the animations so I was just winging it to see what the issue was let me try the full code and see

remi.nzOP•9mo ago

Alright sure

leowest•9mo ago

what is container in you sidebar the usercontrol itself? the grid?

remi.nzOP•9mo ago

it's a rectangle

leowest•9mo ago

I might need the sidebar xaml as well then

remi.nzOP•9mo ago

<UserControl x:Class="UI_Prototype.UserControls.Sidebar"
             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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="240" Background="Transparent">
    
    <UserControl.Effect>
        <DropShadowEffect x:Name="GlowEffect" Color="#508BFF" ShadowDepth="0" BlurRadius="0" Opacity="0.5"/>
    </UserControl.Effect>
    
    <Grid Name="Grid1">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition />
        </Grid.RowDefinitions>

        <Rectangle x:Name="container" Fill="#0A0A1C" RadiusX="25" RadiusY="25" Grid.RowSpan="2">
        </Rectangle>
        
        <StackPanel Grid.Row="1">
            <RadioButton Style="{DynamicResource menuButton}" Tag="{DynamicResource FontColor}" Margin="20 ,0 ,20 ,10" IsChecked="true">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconBootstrapIcons Kind="HouseDoor" Style="{DynamicResource menuButtonIcon}"/>
                    <TextBlock Text="Home" Style="{DynamicResource menuButtonText}" Foreground="White"/>
                </StackPanel>
            </RadioButton>

            <RadioButton Style="{DynamicResource menuButton}" Tag="{DynamicResource FontColorLight}" Margin="20 ,0 ,20 ,10">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconBootstrapIcons Kind="Gear" Style="{DynamicResource menuButtonIcon}"/>
                    <TextBlock Text="Options" Style="{DynamicResource menuButtonText}"/>
                </StackPanel>
            </RadioButton>

<UserControl x:Class="UI_Prototype.UserControls.Sidebar"
             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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="240" Background="Transparent">
    
    <UserControl.Effect>
        <DropShadowEffect x:Name="GlowEffect" Color="#508BFF" ShadowDepth="0" BlurRadius="0" Opacity="0.5"/>
    </UserControl.Effect>
    
    <Grid Name="Grid1">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition />
        </Grid.RowDefinitions>

        <Rectangle x:Name="container" Fill="#0A0A1C" RadiusX="25" RadiusY="25" Grid.RowSpan="2">
        </Rectangle>
        
        <StackPanel Grid.Row="1">
            <RadioButton Style="{DynamicResource menuButton}" Tag="{DynamicResource FontColor}" Margin="20 ,0 ,20 ,10" IsChecked="true">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconBootstrapIcons Kind="HouseDoor" Style="{DynamicResource menuButtonIcon}"/>
                    <TextBlock Text="Home" Style="{DynamicResource menuButtonText}" Foreground="White"/>
                </StackPanel>
            </RadioButton>

            <RadioButton Style="{DynamicResource menuButton}" Tag="{DynamicResource FontColorLight}" Margin="20 ,0 ,20 ,10">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconBootstrapIcons Kind="Gear" Style="{DynamicResource menuButtonIcon}"/>
                    <TextBlock Text="Options" Style="{DynamicResource menuButtonText}"/>
                </StackPanel>
            </RadioButton>

            <RadioButton Style="{DynamicResource menuButton}" Tag="{DynamicResource FontColorLight}" Margin="20 ,0 ,20 ,10">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconBootstrapIcons Kind="Joystick" Style="{DynamicResource menuButtonIcon}"/>
                    <TextBlock Text="Arena" Style="{DynamicResource menuButtonText}"/>
                </StackPanel>
            </RadioButton>

        </StackPanel>
    </Grid>
</UserControl>

            <RadioButton Style="{DynamicResource menuButton}" Tag="{DynamicResource FontColorLight}" Margin="20 ,0 ,20 ,10">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconBootstrapIcons Kind="Joystick" Style="{DynamicResource menuButtonIcon}"/>
                    <TextBlock Text="Arena" Style="{DynamicResource menuButtonText}"/>
                </StackPanel>
            </RadioButton>

        </StackPanel>
    </Grid>
</UserControl>

On a second thought, why did I even use a rectangle for it, what was I thinking....

leowest•9mo ago

:catlaugh:

remi.nzOP•9mo ago

Oh yeah, I was thinking to add a blur effect to it but if I apply the blur to the grid itself, it'll blur the whole thing so I used a rectangle but at the end the blur didn't work out well so I stick to container.Opacity

leowest•9mo ago

so do u want to keep it always open at which size and above? 900 ?

remi.nzOP•9mo ago

900 = the main window size? 1500 px if that's the case

leowest•9mo ago

min is set to 800 my bad MinWidth="1172"

remi.nzOP•9mo ago

yeah

leowest•9mo ago

so it shouldn't go lower than that size wise

remi.nzOP•9mo ago

yep

leowest•9mo ago

ok so 1500+ always open?

remi.nzOP•9mo ago

yes

leowest•9mo ago

may sound silly but give this a go

if (Application.Current.MainWindow.Width >= AlwaysOpenWidth)

if (Application.Current.MainWindow.Width >= AlwaysOpenWidth)

and

private const double AlwaysOpenWidth = 1500;

private const double AlwaysOpenWidth = 1500;

you're always matching the size of the columnWidth but u never consider the actual window size

remi.nzOP•9mo ago

where do I use it? mainwindow.cs?

leowest•9mo ago

in your sidebar I suppose isn't that the place u handle the expand / collapse

remi.nzOP•9mo ago

right, hold on

leowest•9mo ago

remi.nzOP•9mo ago

Uhmm...

remi.nzOP•9mo ago

I don't think you understood the problem here, I was fine with my logic of expansion and collapsed state. The problem here is there is a gap between the sidebar's collapsed state and the column 2's content. This

remi.nzOP•9mo ago

leowest•9mo ago

that is the 95 width u have in the mainxaml I said it above or at least I belive it is let me double check

remi.nzOP•9mo ago

You did, so what do I replace it with?

leowest•9mo ago

u just remove it?

remi.nzOP•9mo ago

gap still exists

leowest•9mo ago

mmm looks like some padding too let me see on that one also ur missing WindowChrome.IsHitTestVisibleInChrome="True" your header buttons and capitionheight needs to be bigger than 0 so u have a drag / movable window but I assume u know these 😉

remi.nzOP•9mo ago

I didn't know that, I was using the DragMove(); in my code behind for now.

        private void Window_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            DragMove();
        }

        private void Window_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            DragMove();
        }

leowest•9mo ago

try setting the captionheight to 40 for example u will notice u can now drag it perfectly

remi.nzOP•9mo ago

Alright, I'll give it a go.

leowest•9mo ago

the sizing seems tricky because ur using a % it would work better if it was a fixed size instead I think let me try I see so the problem is that you're working within the sidebar to run the animations without modifying the actual sidebar witdh so it always run inside that space instead of resizing changing etc

remi.nzOP•9mo ago

Mhmm yeah

leowest•9mo ago

there is no simple answer to the spacing unhappily other than remaking it in a way it takes into consideration the space between the 2 since its kind of a floating sidebar u can probably getting it pretty close by changing the width from 0.2* to 15 ish removing the margin and the 95 width but u will still have a space because its based on a % and then the expand would not work as intended either

remi.nzOP•9mo ago

Yeah figured

leowest•9mo ago

so u would have to find the sweet spot

remi.nzOP•9mo ago

But as the screen resolution increases it'll still be inconsistent welp, so basically re-design it?

leowest•9mo ago

yep

remi.nzOP•9mo ago

Any tips

leowest•9mo ago

eh I never done a sidebar like that I normally do it like sliding from the corner like the one I showed u earlier

remi.nzOP•9mo ago

I see

leowest•9mo ago

its much easier to manage

remi.nzOP•9mo ago

Probably, just wanted to try out some of my imaginations with WPF but seems it's kinda difficult 😅

leowest•9mo ago

yeah a lot of things require a lot of fine tunning

remi.nzOP•9mo ago

Alright, thanks for your time though. I really appreciate it!

leowest•9mo ago

what you're doing is definitively possible thou

remi.nzOP•9mo ago

Yep, just need to figure out how

leowest•9mo ago

I just dont have the time or will do try it out myself 🙂 these things are like small adventures

remi.nzOP•9mo ago

Haha, no need to sweat on this. I got this. Thanks again.

leowest•9mo ago

gl 🙂 $close

MODiX•9mo ago

Use the /close command to mark a forum thread as answered

leowest•9mo ago

@remi.nz my bad I just realized something that might work

<Border CornerRadius="25" BorderBrush="Transparent" BorderThickness="0" Padding="6" Background="#161F49">
    <Grid Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="sidebarCol" Width="auto"/>
            <ColumnDefinition x:Name="contentCol"/>
        </Grid.ColumnDefinitions>


        <StackPanel Grid.Column="1" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Grid.Column="1" Name="btnMinimize" Content="_" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMinimize_Click"/>
            <Button Grid.Column="1" Name="btnMaximize" Content="🗖" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMaximize_Click" />
            <Button Grid.Column="1" Name="btnClose" Content="X" Width="40" Height="40" HorizontalAlignment="Right" Click="btnClose_Click"/>
        </StackPanel>
        <local:Sidebar x:Name="mySidebar" Grid.Row="1" Width="95" Grid.Column="0" Panel.ZIndex="99"/>
        <local:Home Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2"/>
    </Grid>
</Border>

<Border CornerRadius="25" BorderBrush="Transparent" BorderThickness="0" Padding="6" Background="#161F49">
    <Grid Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="sidebarCol" Width="auto"/>
            <ColumnDefinition x:Name="contentCol"/>
        </Grid.ColumnDefinitions>


        <StackPanel Grid.Column="1" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Grid.Column="1" Name="btnMinimize" Content="_" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMinimize_Click"/>
            <Button Grid.Column="1" Name="btnMaximize" Content="🗖" Width="40" Height="40" HorizontalAlignment="Right" Click="btnMaximize_Click" />
            <Button Grid.Column="1" Name="btnClose" Content="X" Width="40" Height="40" HorizontalAlignment="Right" Click="btnClose_Click"/>
        </StackPanel>
        <local:Sidebar x:Name="mySidebar" Grid.Row="1" Width="95" Grid.Column="0" Panel.ZIndex="99"/>
        <local:Home Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2"/>
    </Grid>
</Border>

leowest•9mo ago

basically just letting auto handle the sidebar column @remi.nz let me know if that works the same for u

remi.nzOP•9mo ago

I've come up with this before joining the server but through this approach I lose the overlapping part on mouse hover by setitng it to "auto" it will always push away column2 on mouse hover but I only want it to do that when I've removed the mouse hover events I came up with this solution, not too long ago:

        private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (Width >= 1500)
            {
                sidebarCol.Width = new GridLength(270, GridUnitType.Pixel);
            }
            else
            {
                sidebarCol.Width = new GridLength(120, GridUnitType.Pixel);
            }
            mySidebar.CheckAndExpand();
        }

        private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (Width >= 1500)
            {
                sidebarCol.Width = new GridLength(270, GridUnitType.Pixel);
            }
            else
            {
                sidebarCol.Width = new GridLength(120, GridUnitType.Pixel);
            }
            mySidebar.CheckAndExpand();
        }

remi.nzOP•9mo ago

leowest•9mo ago

u can add an animation so it pushes away nicely thou so it would feel fluid with the layout instead of just pushing away

remi.nzOP•9mo ago

Yeah, figuring out how can I add animations to grid Do you know any tutorial or documentation for it?

leowest•9mo ago

https://github.com/XamlFlair/XamlFlair

GitHub

GitHub - XamlFlair/XamlFlair: XamlFlair is an animation library for...

XamlFlair is an animation library for UWP, WPF, and Uno, built to facilitate Xaml animations using only attached properties. - XamlFlair/XamlFlair

leowest•9mo ago

maybe this is of interest

remi.nzOP•9mo ago

I'll give it a go, thanks. Hey, one more thing

leowest•9mo ago

http://web.archive.org/web/20120414171716/http://windowsclient.net/learn/video.aspx?v=70654

Video Training - WindowsClient.net

Microsoft portal site for the Windows Forms and Windows Presentation Foundation (WPF) developer community. Download samples, download controls, post to the forums, read community blogs and product team blogs and learn about windows client development.

leowest•9mo ago

there is this but its old and I am unsure u can get the video https://stackoverflow.com/questions/197855/in-wpf-has-anybody-animated-a-grid

remi.nzOP•9mo ago

So as you can see in this video, while hovering the gives a glow effect and the opacity goes 0.9, but changing the opacity doesn't seem a right way to do it because the contents behind the sidebar are giving it a weird look, is there any way I can add acrylic blur? I tried with Guassian blur yesterday but it just blurs the edges too and it looks like a very bad photoshop.

remi.nzOP•9mo ago

I'm trying to achieve a blur like this

leowest•9mo ago

well border does have BlurEffect and u can set the KernelType to Gaussian

remi.nzOP•9mo ago

But it would blur the entire thing and it looks gross imo in the photo above the border of the sidebar are well distinguished but in guassian blur its not

leowest•9mo ago

    <Rectangle.Effect>  
        <BlurEffect Radius="{DynamicResource BlurRadius}"/>  
    </Rectangle.Effect>

    <Rectangle.Effect>  
        <BlurEffect Radius="{DynamicResource BlurRadius}"/>  
    </Rectangle.Effect>

I see you're referring to the light that comes out when it expands as it its right now on the video? that pops in the middle ofthe control

remi.nzOP•9mo ago

this welcome text, I want to hide it behind the blur

leowest•9mo ago

I see what it looks like with the above?

remi.nzOP•9mo ago

Wdym nvm I'm dumb, lemme try the guassian blur and show it to you

remi.nzOP•9mo ago

as you can see the edges are blurred too and it doesn't hide it well

leowest•9mo ago

ah yeah it looks awful

remi.nzOP•9mo ago

yeah So I was wondering if acrylic blur is possible

leowest•9mo ago

mmm natively no I dont know I know its possible

leowest•9mo ago

https://github.com/riverar/sample-win32-acrylicblur

GitHub

GitHub - riverar/sample-win32-acrylicblur: Sample WPF Acrylic Blur app

Sample WPF Acrylic Blur app. Contribute to riverar/sample-win32-acrylicblur development by creating an account on GitHub.

leowest•9mo ago

https://learn.microsoft.com/en-us/answers/questions/152914/how-to-blur-behind-classic-win32-or-wpf-window-usi

remi.nzOP•9mo ago

I've came across this repo but this is just cryptic code for me and I've got no clue how will I be able to use it.

leowest•9mo ago

its not too hard, its basically using the win32 api for SetWindowCompositionAttribute to set certain parts of a control but yeah its by no means simple when u have to use that the alternative would be using some ui library that fits the purpose I guess $wpfuilibs

MODiX•9mo ago

MahApps https://github.com/MahApps/MahApps.Metro ModernWPF https://github.com/Kinnara/ModernWpf Adonis UI https://github.com/benruehl/adonis-ui Material Design https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit Biaui https://github.com/YoshihiroIto/Biaui HandyControl https://github.com/HandyOrg/HandyControl WPFUI (Windows 11 inspired) https://github.com/lepoco/wpfui Waves (WPF/Avalonia/More) https://github.com/waves-framework/waves.ui.wpf

remi.nzOP•9mo ago

Mhmmm alright, thanks.

leowest•9mo ago

do u have a github of your project?

remi.nzOP•9mo ago

No, not yet. As I said I'm just getting started with WPF and exploring it.

leowest•9mo ago

well if u make one I can look into whether that code I linked above would work

remi.nzOP•9mo ago

I made it work!

remi.nzOP•9mo ago

Now just the acrylic blur 🥹 I checked it out by the way and reviewing the code (by Copilot) it says the method which it uses for acrylic blur can only be applied to Window not a specific element/usercontrol turns out there was a mis-match in animation time duration between the sidebar and the grid, matched the duration now and the animation is now consistent.

leowest•9mo ago

nice there is a repository called BlurryControls I dont have the link thou but give it a look aside from what WPF UI which is a ui library does seem to have the blur u want and its a very nice looking lib

remi.nzOP•9mo ago

Will do, thanks! Hello, it's me again! So, now I'm trying to create a Task Manager clone, just the graphs part for now. So, I have a UserControl called Graph.xaml which is basically a graph and a text box. Then I have a Home.xaml which is my View and then HomeVM which is obviously my ViewModel. Now, I have an issue. In my Graph.xaml I've created a Binding called GraphData and then through Home.xaml I'm trying to define that GraphData so that my User Control remains re-usable and I use it for other graphs too. Home.xaml

    <userControls:Graph x:Name="CPU_Graph" GraphData="{Binding GraphDataCPU}" />

    <userControls:Graph x:Name="CPU_Graph" GraphData="{Binding GraphDataCPU}" />

and in my Graph.xaml, I've put it like this

            <lvc:CartesianChart Series="{Binding GraphData}" LegendLocation="None" Height="250" Width="500" Hoverable="False">

            <lvc:CartesianChart Series="{Binding GraphData}" LegendLocation="None" Height="250" Width="500" Hoverable="False">

but when I debug the program, it says that Graph.xaml is looking for "GraphData" in HomeVM and it's unable to find it, but instead it should look for "GraphDataCPU" as defined in Home.xaml, why is it not working? Graph.xaml.cs

using LiveCharts;
using System.Windows;
using System.Windows.Controls;

namespace UI_Prototype.UserControls
{
    public partial class Graph : UserControl
    {
        public static readonly DependencyProperty GraphDataProperty =
            DependencyProperty.Register("GraphData", typeof(SeriesCollection), typeof(Graph), new PropertyMetadata(null));

        public SeriesCollection GraphData
        {
            get { return (SeriesCollection)GetValue(GraphDataProperty); }
            set { SetValue(GraphDataProperty, value); }
        }

        public Graph()
        {
            InitializeComponent();
        }
    }
}

using LiveCharts;
using System.Windows;
using System.Windows.Controls;

namespace UI_Prototype.UserControls
{
    public partial class Graph : UserControl
    {
        public static readonly DependencyProperty GraphDataProperty =
            DependencyProperty.Register("GraphData", typeof(SeriesCollection), typeof(Graph), new PropertyMetadata(null));

        public SeriesCollection GraphData
        {
            get { return (SeriesCollection)GetValue(GraphDataProperty); }
            set { SetValue(GraphDataProperty, value); }
        }

        public Graph()
        {
            InitializeComponent();
        }
    }
}

Home.xaml.cs

using System.Windows.Controls;
using UI_Prototype.ViewModels;

namespace UI_Prototype.Views
{
    public partial class Home : UserControl
    {
        public Home()
        {
            InitializeComponent();
            DataContext = new HomeVM(); 
        }
    }
}

using System.Windows.Controls;
using UI_Prototype.ViewModels;

namespace UI_Prototype.Views
{
    public partial class Home : UserControl
    {
        public Home()
        {
            InitializeComponent();
            DataContext = new HomeVM(); 
        }
    }
}

@leowest Sorry for the @ but I don't think anyone else would check this out. Basically somehow it's getting hardcoded within the Graph.xaml UserControl. If I define Series="{Binding GraphDataCPU}", it would work but it would not accept the databinding defined by the home.xaml

leowest•9mo ago

I am a bit tied right now it would be better if u compile this question into a new #help there are many others around here that do WPF and can help as well

remi.nzOP•9mo ago

Alright, no worries. Thanks

leowest•9mo ago

if no one checks it by the time im free I will look into it thou

remi.nzOP•9mo ago

Appreciate it.

Gaming

Programming

✅ Help needed with WPF GUI