C# WPF UI Tutorials: 23 - Settings Page UI

Part of a series of tutorials on creating WPF applications in C#

In this video we add most of the settings page UI. Next we will create the view models and convert the UI into separate user controls for cleaner UI

[the_null]

Thank you bro, You really are an angel! 👼

[iftaker]

I have been following your channel for a while now. I got to admit that I have learned lots of things through your channel. Not many people show such detailed step by step process of developing an app, Could you (if you ever get the chance) show us the interface between the app and the SQL server - or at least show us some best practices. Also, I believe some early videos can be revisited like the Treeview bound with a database with some good practices.

[barryjohnson]

Great tutorial. thanks for the great and easy explanation.keep up the hard work.

[lasr]

I think the animations have a few flaws, that's why it's been messing up a lot
one obvious one that broke everything in my opinion, is in the
these two things I think shouldn't belong there
👉🏻 if (!(bool)value)
element.Visibility = Visibility.Hidden;
and
👉🏻 await Task.Delay(5);
The await is not needed since we're on the first load we want everything gone without a delay, so it doesn't need the time to calculate anything because we're setting visibility to hidden in the animation (and in the case of animating the pages in we anyway pass the application width in)
and since we took the delay away we don't need the visibility set here either
because if we're animating in, then the animation itself only sets it to visible if seconds is not 0 which means that on the first load it will not make it visible
and if we're animating out, since the seconds is 0 the animating out will set it to hidden w/o any delay at all
and this line is what messed up the side control

The other one is in the animate out animations
public static async Task
{
...
// Make page visible
👉🏻 element.Visibility = Visibility.Visible;
...
}
that line should not be there as if you're animating out I imagine that the element is visible

In my opinion, these are the 2 things that made the whole mess
I just removed them and it works wonders
tell me if I'm missing something with this

Thanx for your work it's really wonderful

[vinuhosanagar]

Thank you. you are doing a great job. God bless you :)

[Fizzle]

Tip for anyone still following along if PanelChildMarginProperty is not working in the designer toggle the Disable project code button then rebuild

[TheBirdey]

Again awesome videos!!

But another question :) Is there a reason why you don't have the animations all in 1 method but with a Enum controlling which way they go to save having to edit 4 methods for bug fixes, for example:

public static class PageAnimations
{
/// <summary>
/// Slides a page in
/// </summary>
/// <param name="page">The page to animate</param>
/// <param name="seconds">The time the animation will take</param>
/// <param name="direction">The direction the animation goes.
/// <returns></returns>
public static async Task SlideAndFadeInAsync(this Page page, float seconds, Direction direction)
{
// Create the storyboard
var sb = new Storyboard();

// Add slide
sb.AddSlide(seconds, page.WindowWidth, direction);

// Add fade in animation
sb.AddFadeIn(seconds);

// Start animating
sb.Begin(page);

// Make page visible
page.Visibility = Visibility.Visible;

// Wait for it to finish
await Task.Delay((int)(seconds * 1000));
}
}

public static void AddSlide(this Storyboard storyboard, float seconds, double offset, float decelerationRatio = 0.9f, bool keepMargin = true, Direction direction)
{
var thicknessFrom = new Thickness(0);
var thicknessTo = new Thickness(0);
switch (direction)
{
case Direction.FromLeft:
thicknessFrom = Thickness(-offset, 0, keepMargin ? offset : 0, 0);
break;
case Direction.ToLeft:
thicknessTo = Thickness(-offset, 0, keepMargin ? offset : 0, 0);
break;
case Direction.FromRight:
thicknessFrom = Thickness(keepMargin ? offset : 0, 0, -offset, 0);
break;
case Direction.ToRight:
thicknessTo = Thickness(keepMargin ? offset : 0, 0, -offset, 0);
break;
default:
}
// Create the margin animate
var animation = new ThicknessAnimation
{
Duration = new Duration(TimeSpan.FromSeconds(seconds)),
From = thicknessFrom,
To = thicknessTo,
DecelerationRatio = decelerationRatio
};

// Set the target property name
Storyboard.SetTargetProperty(animation, new PropertyPath("Margin"));

// Add this to the storyboard

}

public enum Direction
{
FromRight, ToRight, FromLeft, ToLeft, Up, Down
}
}

[TheMohsell]

Hi Luke, thaks again for the series. How does the elements sharing the same instance of an animation, and therefore, the FirstRun property, get there own flag (FirstRun) independently, i mean why the fact that the animate property (parent class) having static Instance, does not get the elements to share the same (FirstRun flag)

[persoulrpg]

That is great. Decided to learn C# :-). Question: let's say I already have IoC, converters and all that stuff required to switch pages within application. What if I'm having multiple menu items (about 10) and want to easly switch pages without registering an event for each menu item? Is there an easy approach? Maybe somehow calling the directly from the WPF's XAML file?

[mongooseasd]

Would it be a problem, if you would just put the animations into an else part and if the animation seconds is 0, then no storyboard or animation at all?
Like this (pastebin is under maintenance)
/// <summary>
/// Slides an element out to the bottom
/// </summary>
/// <param name="element">The element to animate</param>
/// <param name="seconds">The time the animation will take</param>
/// <param name="keepMargin">Whether to keep the element at the same height during animation</param>
/// <param name="height">The animation height to animate to. If not specified the elements height is used</param>
/// <returns></returns>
public static async Task FrameworkElement element, float seconds = 0.3f, bool keepMargin = true, int height = 0)
{
// If we dont want to see any animation, make the element hidden
// as with a zero animation storyboard it still animates out
if (seconds == 0)
element.Visibility = Visibility.Hidden;
else
{
// Create the storyboard
var sb = new Storyboard();

// Add slide to bottom animation
sb.AddSlideToBottom(seconds, height == 0 ? element.ActualHeight : height, keepMargin: keepMargin);

// Add fade in animation
sb.AddFadeOut(seconds);

// Start animating
sb.Begin(element);

// Make page visible
element.Visibility = Visibility.Visible;

// Wait for it to finish
await Task.Delay((int)(seconds * 1000));

// Hides the element
element.Visibility = Visibility.Hidden;
}
}

[barryjohnson]

My friend i think it's a good idea if you think about adding a splash screen to the chat app so it will look great like adobe photoshop splash screen and I think it want take to much time to work on maybe a view model for a loading window to main window after some delay time.

[tomas]

Awesome!

What is Marquee in FrameworkElementAnimations? Where I have to put it?

[muhammadhammad]

@AngelSix Great Videos. You are doing a very good job .Sir when you will start making database for your app? Will you use LINQ aur ADO.NET? And I also want to request you please teach us how to send personal messages and how to show through programming if someone is online.

[huanitomartinez]

Hi. Can you assist me?

I have a SettingsViewModel with many controls in it. I need to save it's values to sqlite database. The thing is that I don't want to use the regular 'save' button, I want to save those as soon as they are edited. I don't really want the onpropertychanged binding, because controls like sliders would send hundreds of save queries per second. I don't really wanna delay the command also, because I'm updating another control when slider moves. What are the options here?

Would I need to bind into something like a 'save event' in each control? That would be kinda overkill

[barryjohnson]

My friend i have something i want to ask you. What if i use 3D animation in wpf in some of the apps i make for exemple like a 3D logo mybe it will take to much memory and .I know 3D animation is not a simple task to do in wpf but it is there and i can use it but what do you think of it i just want try it.

[tyraniusdelten]

Please can you tell me....How many more. Videos Are coming....