How to implement UWP the right way

Question

I run often into many problems which leads to refactoring my code...

That is why I want to ask for some recommendations.

The problems I'm running into are:

1) Providing data to XAML

Providing simple data to control value instead of using a value converter. For instance I have a color string like "#FF234243" which is stored in a class. The value for the string is provided by a web application so I can only specify it at runtime.

2) UI for every resolution

In the beginnings of my learning I got told that you can create a UI for every possible resolution, which is stupid. So I've written a ValueConverter which I bind on an element and as ConverterParameter I give a value like '300' which gets calculated for every possible resolution... But this leads to code like this...

<TextBlock
Height={Binding Converter={StaticResource SizeValue}, ConverterParameter='300'}
/>

3) DependencyProperties vs. NotifyProperties(Properties which implement INotifyPropertyChanged) vs. Properties

I have written a control which takes a list of value and converts them into Buttons which are clickable in the UI. So I did it like this I created a variable which I set as DataContext for this specific Control and validate my data with DataContextChanged but my coworker mentioned that for this reason DependencyProperties where introduced. So I created a DependecyProperty which takes the list of items BUT when the property gets a value I have to render the buttons... So I would have to do something like

public List<string> Buttons
        {
            get { return (List<string>)GetValue(ButtonsProperty); }
            set
            {
                SetValue(ButtonsProperty, value);
                RenderButtons();
            }
        }
        // Using a DependencyProperty as the backing store for Buttons.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ButtonsProperty =
            DependencyProperty.Register("Buttons", typeof(List<string>), typeof(MainPage), new PropertyMetadata(""));

        private void RenderButtons()
        {
            ButtonBar.Children.Clear();
            ButtonBar.ColumnDefinitions.Clear();

            if(Buttons != null)
            {
                int added = 0;
                foreach (var item in Buttons)
                {
                    var cd = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) };
                    var btn = new Button() { Content = item };
                    ButtonBar.ColumnDefinitions.Add(cd);
                    ButtonBar.Children.Add(btn);
                    Grid.SetColumn(btn, added);
                }
            }
        }

And have to use it like this:

<Controls:MyControl
    x:Name="ButtonBar" Button="{Binding MyButtons}">
</Controls:MyControl>

Since these are a lot of topics I could seperate those but I think that this is a pretty common topic for beginners and I have not found a got explanation or anything else

Answer 1

1. Providing data to XAML

There are two options: prepare data in the ViewModel or to use converter. To my mind using converter is better since you can have crossplatform viewModel with color like you mentioned in your example and converter will create platform dependent color. We had similar problem with image. On android it should be converted to Bitmap class, while on UWP it's converted to BitmapImage class. In the viewModel we have byte[].

2. UI for every resolution

You don't need to use converter, since Height is specified in effective pixels which will suit all the required resolutions automatically for you. More info can be found at the following link:

https://learn.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml

There are two options how to deal with textblock sizes:

a) Use predefined textblock styles and don't invent the wheel (which is the recommended option):

https://learn.microsoft.com/en-us/windows/uwp/design/style/typography#type-ramp

Or

b) Specify font size in pixels. They are not pixels, but effective pixels. They will be automatically scaled on different devices:

https://learn.microsoft.com/en-us/windows/uwp/design/style/typography#size-and-scaling

Furthermore, use adaptive layout to have different Layout for different screen sizes.

3) DependencyProperties vs. NotifyProperties(Properties which implement INotifyPropertyChanged) vs. Properties

As per your code you can try to use ListView or ItemsControl and define custom item template.

DependencyProperties are created in DependencyObject and are accessible in xaml. All controls are inherited from DependencyObjects. Usually you create them when you want to set them in xaml. They are not stored directly in the objects, but in the global dictionary and resolved at runtime.

DependencyProperties were created long time ago and you can find lots of links which explain them in details:

http://www.wpftutorial.net/dependencyproperties.html

https://techpunch.wordpress.com/2008/09/25/wpf-wf-what-is-a-dependency-property/

When should I use dependency properties in WPF?

What is a dependency property? What is its use?

What is a dependency property?

INotifyPropertyChanged INPC are the central part of MVVM. You bind your view to viewModel which implements INPC and when you change value of the property control is notified and rereads the new value.

Download the following video in high resolution which explains MVVM in details (by Laurent Bugnion): https://channel9.msdn.com/Events/MIX/MIX11/OPN03

MVVM: Tutorial from start to finish?

Normal properties are used in model classes or when there is no need to notify UI regarding changes.