Alright, so I am pretty new to WPF and I've tasked myself with a pretty hard challenge. I'm trying to make a program for the company I work for. I've already designed the Login Window and now, I'd like to design the dashboard.
Here is a screenshot of the login Window, with it's XAML below: Login window
<Window x:Class="Programme_de_gestion.LoginWindow"
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:Programme_de_gestion"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="380"
AllowsTransparency="True" Background="Transparent"
WindowStyle="None" ResizeMode="NoResize"
MouseDown="Window_MouseDown">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border CornerRadius="10" Grid.RowSpan="2">
<!--Création du style de la fenêtre-->
<Border.Background>
<!--Les gradientstop servent à sélectionner
les couleurs du background de la fenêtre.
Je me suis servis du site:
https://htmlcolorcodes.com/fr/-->
<LinearGradientBrush>
<GradientStop Color="#918886 " Offset="0.0"/>
<GradientStop Color="#EBE7E6 " Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel VerticalAlignment="Center">
<!--Image logo à insérer en début de fenêtre.
J'ai pris le logo de JPG ICI:
https://secureservercdn.net/45.40.148.147/vzq.777.myftpupload.com/wp-content/themes/swoo/images/logo1.png-->
<Image Source="Images\logoJPG.png" Width="200"/>
<!--À décider si on garde le texteblock sous le logo ou non-->
<TextBlock Text="Connection"
FontWeight="Light"
FontFamily="Helvetica"
FontSize="22"
Foreground="white"
HorizontalAlignment="Center"/>
</StackPanel>
<!-- StackPanel contenant toute la section du bas-->
<StackPanel Grid.Row="1">
<!--StackPanel pour la section du nom d'utilisateur et Icone-->
<StackPanel Orientation="Horizontal">
<!--Zone de texte pour le login-->
<TextBox FontFamily="Helvetica"
FontWeight="Light"
Text="Username"
FontSize=" 20 "
HorizontalAlignment="Center"
Foreground ="White"
Background="Transparent"
BorderThickness="0"
Width="235"
HorizontalContentAlignment="Left"
Opacity="0.5"
Height="25"
Margin="63,0,0,0"/>
<!--Icone de compte-->
<iconPacks:PackIconMaterial Kind="Account"
Foreground="White"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</StackPanel>
<!--Border pour faire plus chic-->
<Border Width="250"
Height="2"
Opacity="0.5"
Background="white"/>
<!--StackPanel pour la section password-->
<StackPanel Orientation="Horizontal"
Margin="0,20,0,0">
<!--Champ d'entrée du mot de passe-->
<PasswordBox FontFamily="Helvetica"
FontWeight="Light"
Password="Password"
FontSize=" 20 "
HorizontalAlignment="Center"
Foreground ="White"
Background="Transparent"
BorderThickness="0"
Width="235"
HorizontalContentAlignment="Left"
Opacity="0.5"
Height="25"
Margin="63,0,0,0"/>
<!--Icone pour le mot de passe-->
<iconPacks:PackIconMaterial Kind="Lock"
Foreground="White"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</StackPanel>
<!--Bordure pour faire plus chic-->
<Border Width="250"
Height="2"
Opacity="0.5"
Background="white"/>
<TextBlock Text="MOT DE PASSE OUBLIÉ?"
Margin="0,5,0,0"
FontWeight="Light"
FontFamily="Helvetica"
FontSize="8"
Foreground="white"
HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" Margin="0,30,0,0">
<Button Width="100" Height="40" Content="LOGIN"
HorizontalAlignment="Center"
Margin="60,0,0,0"
Name="btnLogin"
Click="btnLogin_Click" Cursor="Hand"/>
<Button Width="100" Height="40" Content="FERMER"
HorizontalAlignment="Center"
Margin="60,0,0,0"
Name="btnFermer"
Click="btnFermer_Click"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Window>
After the LoginWindow, a MainWindowAppears: MainWindow
The section on the Right is a View in which I intend to house my dashboard as a Window. When a different element is selected on the left, the window displayed in the view will change.
The first Issue I have is with the buttons. I made a custom control for the button in the Login Window, which is in ModernButton.xaml.
For the Dashboard, I'd like to use a nuget package called Material Design In XAML. Now, when I add the Nuget package and add the ressource dictionnaries to my ResourceDictionary.MergedDictionaries, the button style of my login window is changed to the one provided by the Material design package. How can I conserve the style of the button I defined in ModernButton.XAML
Also, I'm not so sure about the window that changes in the view section on the right. If it's something that wouldn't work, do you have other solutions for me.
Sorry for the long post, let me know if you need more of my source code or if my explanations are unclear, English isn't my mother tongue.
Edit: Here is the code in the ModernButton.XAML:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" x:Key="ModernButton">
<Setter Property="Foreground" Value="white"/>
<Setter Property="FontFamily" Value="Helvetica"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background ="{TemplateBinding Background}" CornerRadius="20"
BorderThickness="2"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="Opacity" Value="0.4"/>
<Setter Property="Foreground" Value="DeepSkyBlue"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
And here is the code in the App.XAML:
<Application x:Class="Programme_de_gestion.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Programme_de_gestion"
StartupUri="LoginWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ModernButton.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
As for the Button style, you simply forgot to specify the style which you defined in ModernButton.xaml. It is why that style is overridden by another style included in Material design package.
To fix this, set Style property of the Button.
<Button Width="100" Height="40" Content="LOGIN"
HorizontalAlignment="Center"
Margin="60,0,0,0"
Name="btnLogin"
Cursor="Hand"
Style="{StaticResource ModernButton}"/>
As for the application structure, I think this is matter of typical master-detail pattern and you can find a variety of samples for it.