8 Replies - 2550 Views - Last Post: 14 April 2017 - 03:37 AM

#1 JohnRipper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 28-March 17

Opinion about my XAML code and general MVVM questions

Posted 07 April 2017 - 02:14 AM

Hello ! So after some exercises and alot of reading and watching tutorials at youtube, i came up with a small exercise, so i can check if i am doing everything alright. The problem is that i don't have someone to tell me if i am doing any mistakes in my XAML code, that's why i am asking your opinion guys. This is my XAML code:

<UserControl x:Class="MVVM_Example_2.View.CarControl"
             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:local="clr-namespace:MVVM_Example_2.View"
             xmlns:ViewModel ="clr-namespace:MVVM_Example_2.ViewModel"
             xmlns:Model ="clr-namespace:MVVM_Example_2.Model"
             mc:Ignorable="d" d:DesignWidth="300" Height="369">
    <UserControl.Resources>
        <ViewModel:CarViewModelProperties x:Key="CarInstance"/>
        <ViewModel:CarViewModelMethods x:Key="CarModelMethods"/>
    </UserControl.Resources>

    <Grid DataContext="{Binding Source={StaticResource CarInstance}}">
        <Label Content="Seats:" HorizontalAlignment="Left" Margin="31,38,0,0" VerticalAlignment="Top"/>
        <Label x:Name="SeatsLbl" Content="{Binding Seats}" HorizontalAlignment="Left" Margin="85,38,0,0" VerticalAlignment="Top" Width="45"/>
        <Label Content="Doors:" HorizontalAlignment="Left" Margin="31,69,0,0" VerticalAlignment="Top"/>
        <Label x:Name="DoorsLbl" Content="{Binding Doors}" HorizontalAlignment="Left" Margin="85,69,0,0" VerticalAlignment="Top" Width="45"/>
        <Label Content="Model:" HorizontalAlignment="Left" Margin="31,95,0,0" VerticalAlignment="Top"/>
        <Label x:Name="ModelLbl" Content="{Binding Model}" HorizontalAlignment="Left" Margin="85,95,0,0" VerticalAlignment="Top" Width="45"/>
        <Label Content="Seats:" HorizontalAlignment="Left" Margin="31,178,0,0" VerticalAlignment="Top" Width="62"/>
        <TextBox x:Name="SeatsTxt" Text="{Binding Seats, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Height="23" Margin="98,178,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label Content="Doors:" HorizontalAlignment="Left" Margin="31,206,0,0" VerticalAlignment="Top" Width="62"/>
        <TextBox x:Name="DoorsTxt" Text="{Binding Doors, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Height="23" Margin="98,206,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label x:Name="label" Content="Model:" HorizontalAlignment="Left" Margin="31,234,0,0" VerticalAlignment="Top" Width="62"/>
        <TextBox x:Name="ModelTxt" Text="{Binding Model, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Height="23" Margin="98,234,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Button Content="Show MessageBox" HorizontalAlignment="Left" Margin="44,303,0,0" VerticalAlignment="Top" Width="200" Command="{Binding ShowMVVMMessageBoxCommand, Source={StaticResource CarModelMethods}}" />
        <Button Content="Show Car Details" HorizontalAlignment="Left" Margin="44,330,0,0" VerticalAlignment="Top" Width="200" Command="{Binding ShowCarDetailsMessageBoxCommand, Source={StaticResource CarModelMethods}}" CommandParameter="{Binding CarInformation}" />
    </Grid>
</UserControl>


I have to make a statement here. The CarInstance instance, is in the viewmodel, because inside the CarViewModelProperties class, i have an instance of the class car which contains the properties Seats, Doors, Model and CarInformation. I know that this isn't quite good, but i will not make this mistake again in the next project. I tried as much as possible to fix all the mistakes that tlhIn`toq and other members told me in a previous topic.

Also i have two other questions. Sometimes i see programmers that use MVVM, have in seperate classes the properties and the methods(which is what i did here), and some other they have it in the same class. Does it make any difference here, or it really depends on the project ? The second question, is that for each command i am using a different class. This is what i saw in several MVVM examples in github and some other websites... but it doesn't seem quite right to me. Is it ? And if not is there an other option available ?

P.S and offtopic: I know that there are some guys in some forums that like to hate people because they ask questions... or because they don't speak very good English. I hope that there aren't such people here ... so please no hate :) Peace and love !

Thank you very much all of you for the time given to read my topic !! :)

Is This A Good Question/Topic? 0
  • +

Replies To: Opinion about my XAML code and general MVVM questions

#2 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6507
  • View blog
  • Posts: 14,374
  • Joined: 02-June 10

Re: Opinion about my XAML code and general MVVM questions

Posted 07 April 2017 - 04:52 PM

  • If you're naming every control, there's a problem.
  • The margin's make it clear this is probably drag-n-drop which never makes good XAML.
  • If you're hard setting all the sizes like that, there's a problem. All these hard-set sizes and such don't make a very dynamic layout. One of the benefits and expectations is that layouts will self-adjust to the display. If I run your program on a Windows Phone, Tablet or 24" monitor... in landscape or portrait orientation... it should all adjust. This 1998 micromanagement of everything breaks that.


I don't know anyone that separates the methods from the properties. No company I've worked for does that.

<Grid DataContext="{Binding Source={StaticResource CarInstance}}">
That's weird. A static source for the object binding? What if you have 100 cars and the user selects one? Generally you bind to a property on your ViewModel. In this case I would expect it to be something like SelectedCar
Or... Since this is a UserControl... I would expect the data context to itself with a BindableProperty, and the parent container binding one of its properties to it

<Page>
    <Grid>
       <Controls:CarView Car = "{Binding SelectedCar}">


See how the Car on the control receives the SelectedCar from the page? The idea being that the page might have some type of selected like a ListView and when the user selects a car, the details appear in the CarView control.

I'm not sure what tutorial you're following... But the practices seem odd. Not like anything I've seen used in real workplaces.

If you want to check out my tutorial series feel free.
https://redpillxamar...to-this-series/
It is Xamarin centric so you're welcome to give that a try. Its still Visual Studio, MVVM/XAML/C# - just that your code runs on UWP, Android and iOS instead of just Windows like WPF. Or you can take the concepts from the series and apply them to WPF pretty easily. Concepts translate. You just have to take the Xamarin StackLayout and recognize that as StackPanel in WPF (and so on)
Was This Post Helpful? 1
  • +
  • -

#3 JohnRipper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 28-March 17

Re: Opinion about my XAML code and general MVVM questions

Posted 09 April 2017 - 03:30 AM

Thank you very much tlhIn`toq. Rep up for your commect. So... i saw everything you wrote, and i wrote another small program from the beggining. This time a Clipboard Logger(Clipboard Manager). I tried to fix everything you said.

What i fixed:

- I fixed the logic of the program. Now i think that the things are more logically right.
- I puted the methods and properties in the same class.
- Now i have only one ICommand class to execute all my commands, and not an ICommand class for every command.
- I wrote by hand all the XAML code(including margin, width e.t.c).. and not just drag-and-drop.
- I removed the names from all the controls.

My XAML code:

<Window x:Class="ClipboardManager.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:local="clr-namespace:ClipboardManager"
        xmlns:ViewModelData="clr-namespace:ClipboardManager.ViewModel.ViewModelClasses"
        mc:Ignorable="d"
        Title="Clipboard Logger" Width="573" Height="370" WindowStartupLocation="CenterScreen">
    <window.Resources>
        <ViewModelData:MethodsAndProperties x:Key="MethodsAndProperties"/>
    </window.Resources>

    <Grid DataContext="{Binding Source={StaticResource MethodsAndProperties}}">
        <ListView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,26,0,0" ItemsSource="{Binding ClipboardElements}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="ID" Width="80" DisplayMemberBinding="{Binding ID}"/>
                    <GridViewColumn Header="Content" Width="300" DisplayMemberBinding="{Binding TextContent}"/>
                    <GridViewColumn Header="Time" Width="167" DisplayMemberBinding="{Binding TimeAndDate}"/>
                </GridView>
            </ListView.View>
        </ListView>

        <Menu HorizontalAlignment="Stretch" Height="26" VerticalAlignment="Top">
            <MenuItem Header="File">
                <MenuItem Header="Save All Data" Command="{Binding SaveClipboardDataCommand}"/>
                <MenuItem Header="Exit" Command="{Binding ExitProgramCommand}"/>
            </MenuItem>

            <MenuItem Header="Edit">
                <MenuItem Header="Clear Clipboard History" Command="{Binding ClearClipboardElementsCommand}"/>
                <MenuItem Header="Clear Clipboard" Command="{Binding ClearClipboardCommand}"/>
            </MenuItem>

            <MenuItem Header="Options">
                <MenuItem Header="Logg Clipboard" IsCheckable="True" IsChecked="{Binding LoggerIsON}" />
                <MenuItem Header="Add To Startup" IsCheckable="True" IsChecked="{Binding Isonstartup}"/>
            </MenuItem>

            <MenuItem Header="About" Command="{Binding AboutDialogCommand, Source={StaticResource MethodsAndProperties}}"/>
        </Menu>
    </Grid>
</Window>



I am waiting an evaluation from every experienced member that is willing to help me improve myself :)
Thank you all very much !
Was This Post Helpful? 0
  • +
  • -

#4 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6507
  • View blog
  • Posts: 14,374
  • Joined: 02-June 10

Re: Opinion about my XAML code and general MVVM questions

Posted 10 April 2017 - 02:05 AM

One question...
Does everything still look right if you go into the settings of the PC and change the font scaling from default to say... 150? Not everyone has 25 year old eyes anymore.
Posted Image
Was This Post Helpful? 0
  • +
  • -

#5 JohnRipper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 28-March 17

Re: Opinion about my XAML code and general MVVM questions

Posted 10 April 2017 - 02:44 AM

View PosttlhIn`toq, on 10 April 2017 - 02:05 AM, said:

One question...
Does everything still look right if you go into the settings of the PC and change the font scaling from default to say... 150? Not everyone has 25 year old eyes anymore.
Posted Image

With this setting i actually fu**** up my files order, but anyway... i changed it to 125%(Medium for win 7 that i am right now), and it works like a charm. Why you ask ?

Also i changed the XAML code a little bit, so now it has a very good context menu and some other stuff.Here it is:

<Window x:Class="ClipboardManager.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:local="clr-namespace:ClipboardManager"
        xmlns:ViewModelData="clr-namespace:ClipboardManager.ViewModel.ViewModelClasses"
        xmlns:tb="http://www.hardcodet.net/taskbar"
        mc:Ignorable="d"
        Title="Clipboard Logger" Width="573" Height="370" WindowStartupLocation="CenterScreen" WindowState="{Binding WindowState, Mode=TwoWay}">

    <window.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
    </window.Resources>
    <window.Visibility>
        <Binding Converter="{StaticResource BoolToVisConverter}" Mode="TwoWay" Path="WindowIsVisible"/>
    </window.Visibility>

    <window.DataContext>
        <ViewModelData:MethodsAndProperties/>
    </window.DataContext>

    <Grid>
        <ListView SelectedItem="{Binding SelectedItem}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,26,0,0" ItemsSource="{Binding ClipboardElements, Mode=TwoWay}" SelectionMode="Single">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="ID" Width="80" DisplayMemberBinding="{Binding ID}"/>
                    <GridViewColumn Header="Content" Width="300" DisplayMemberBinding="{Binding TextContent}"/>
                    <GridViewColumn Header="Time" Width="167" DisplayMemberBinding="{Binding TimeAndDate}"/>
                </GridView>
            </ListView.View>
            <ListView.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Remove" IsEnabled="{Binding ContextMenuIsEnabled}" Command="{Binding RemoveClipboardElementCommand}"/>
                    <MenuItem Header="Copy ID" IsEnabled="{Binding ContextMenuIsEnabled}" Command="{Binding CopyClipboardElementIDCommand}"/>
                    <MenuItem Header="Copy Content" IsEnabled="{Binding ContextMenuIsEnabled}" Command="{Binding CopyClipboardElementTextContentCommand}"/>
                    <MenuItem Header="Copy Time" IsEnabled="{Binding ContextMenuIsEnabled}" Command="{Binding CopyClipboardElementTimeAndDateCommand}"/>
                </ContextMenu>
            </ListView.ContextMenu>
        </ListView>

        <Menu HorizontalAlignment="Stretch" Height="26" VerticalAlignment="Top">
            <MenuItem Header="File">
                <MenuItem Header="Save All Data" Command="{Binding SaveClipboardDataCommand}"/>
                <MenuItem Header="Exit" Command="{Binding ExitProgramCommand}"/>
            </MenuItem>

            <MenuItem Header="Edit">
                <MenuItem Header="Clear Clipboard History" Command="{Binding ClearClipboardElementsCommand}"/>
                <MenuItem Header="Clear Clipboard" Command="{Binding ClearClipboardCommand}"/>
            </MenuItem>

            <MenuItem Header="Options">
                <MenuItem Header="Logg Clipboard" IsCheckable="True" IsChecked="{Binding LoggerIsON}" />
                <MenuItem Header="Add To Startup" IsCheckable="True" IsChecked="{Binding Isonstartup}"/>
            </MenuItem>

            <MenuItem Header="About" Command="{Binding AboutDialogCommand}"/>
        </Menu>
    </Grid>
</Window>



I am waiting the opinion form everyone that wants to help me :)
Was This Post Helpful? 0
  • +
  • -

#6 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6507
  • View blog
  • Posts: 14,374
  • Joined: 02-June 10

Re: Opinion about my XAML code and general MVVM questions

Posted 10 April 2017 - 03:47 PM

> Why you ask ?
Because all too often developers make UI that looks great on their screen and forget about the next user at 200%, or 100%, or on a 1024x768 monitor.
Way too many people do not make dynamic, self-adjusting UI.
Was This Post Helpful? 0
  • +
  • -

#7 JohnRipper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 28-March 17

Re: Opinion about my XAML code and general MVVM questions

Posted 10 April 2017 - 10:35 PM

Everything seems ok. The only thing that is off. What is actually a little bit off, is the listview, because the tabs aren't resizing as they should. This can be fixed with a little codebehind, but since i am in MVVM i'll leave it there.

Now, you didn't comment the latest XAML code i posted, so assume that is ok :)
Was This Post Helpful? 0
  • +
  • -

#8 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6507
  • View blog
  • Posts: 14,374
  • Joined: 02-June 10

Re: Opinion about my XAML code and general MVVM questions

Posted 11 April 2017 - 02:38 AM

> because the tabs aren't resizing as they should.
Probably because you're hardcoding their size

Quote

<GridViewColumn Header="ID" Width="80"
<GridViewColumn Header="Content" Width="300"
<GridViewColumn Header="Time" Width="167"


<Menu HorizontalAlignment="Stretch" Height="26" 

I cannot remember the WPF behavior for this... If the text setting is 200% does the menu stay at a height of 26 and crop the text... Or does it resize anyway to accommodate the large font?

Title="Clipboard Logger" Width="573" Height="370" 

Same here... at 200% do these hardcoded sizes work?
Was This Post Helpful? 0
  • +
  • -

#9 JohnRipper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 28-March 17

Re: Opinion about my XAML code and general MVVM questions

Posted 14 April 2017 - 03:37 AM

View PosttlhIn`toq, on 11 April 2017 - 02:38 AM, said:

> because the tabs aren't resizing as they should.
Probably because you're hardcoding their size

Quote

<GridViewColumn Header="ID" Width="80"
<GridViewColumn Header="Content" Width="300"
<GridViewColumn Header="Time" Width="167"


<Menu HorizontalAlignment="Stretch" Height="26" 

I cannot remember the WPF behavior for this... If the text setting is 200% does the menu stay at a height of 26 and crop the text... Or does it resize anyway to accommodate the large font?

Title="Clipboard Logger" Width="573" Height="370" 

Same here... at 200% do these hardcoded sizes work?

They resize, but it depends how much according to the window dimentions. Now... this piece of code doesn't works... because GridViewColumn doesn't have VerticalAlignment. After a lot of google, o think there isn't a way to fix this. Especially in MVVM. The user has to adjust the column width, when the window resizes... wich is pretty annoying...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1