Laden...

Was alles an Styles lagert Ihr in die ResourceDictionarys aus?

Erstellt von resper vor 7 Jahren Letzter Beitrag vor 7 Jahren 1.135 Views
R
resper Themenstarter:in
33 Beiträge seit 2017
vor 7 Jahren
Was alles an Styles lagert Ihr in die ResourceDictionarys aus?

Hallo,

mal eine Frage von einem Anfänger an die erfahrenden User:

Was alles an Styles lagert Ihr in die ResourceDictionarys aus?

Der Codeblock ist meine Hauptseite, ich habe bisher nur die Menü Buttons und die Icon Buttons ausgelagert, weil dieses wiederkehrende Elemente sind.

Wie würde das bei Euch aussehen?

<Window x:Class="resper.LaMeMa.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:resper.LaMeMa"
        mc:Ignorable="d"
        Title="[res][per] Lager- und Medikamentenverwaltung" 
        WindowStartupLocation="CenterScreen" WindowState="Maximized">
    <DockPanel Background="#eef1f5">
        <StackPanel DockPanel.Dock="Left" Orientation="Vertical" Background="#3D3D3D" Width="200">
            <Border BorderBrush="#FFFFFF" BorderThickness="0" VerticalAlignment="Top" Background="#EF3F3F" Height="70">
                <Border.Effect>
                    <DropShadowEffect BlurRadius="10" ShadowDepth="1" Color="#323232" Direction="0" Opacity="0.2" />
                </Border.Effect>
                <TextBlock Text="[res][per]" Foreground="#FFFFFF" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
            </Border>
            <Button x:Name="ManageAccounts" Style="{StaticResource MenuButton}" Click="ManageAccounts_Click">
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <TextBlock Text="&#xf0c0;" Style="{StaticResource IconFont}" HorizontalAlignment="Center"/>
                    <TextBlock Text="Nutzerverwaltung" HorizontalAlignment="Center" Margin="0,5,0,0"/>
                </StackPanel>
            </Button>
        </StackPanel>
        <Border DockPanel.Dock="Top" BorderBrush="#FFFFFF" BorderThickness="0" VerticalAlignment="Top">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="1" Color="#323232" Direction="0" Opacity="0.2" />
            </Border.Effect>            
            <DockPanel Background="#FFFFFF" Height="70">
                <TextBlock DockPanel.Dock="Left" Text="Lager- und Medikamentenmanager" VerticalAlignment="Center" Margin="20" Foreground="#666666" FontSize="18"/>
                <Button x:Name="LogoutButton" DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0" Style="{StaticResource IconButton}" Visibility="Collapsed" Click="LogoutButton_Click">
                    <TextBlock Text="&#xf08b;" Style="{StaticResource IconFont}" />
                </Button>
                <TextBlock DockPanel.Dock="Right" x:Name="MenuLoginName" Text="Bitte einloggen" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0" Style="{StaticResource MenuTitle}"/>
            </DockPanel>
        </Border>
        <Frame x:Name="MainFrame" Source="Accounts/LoginPage.xaml" NavigationUIVisibility="Hidden" Padding="20">

        </Frame>
    </DockPanel>
</Window>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:resper.LaMeMa.ResourceDictionaries">

    <Style TargetType="{x:Type Button}" x:Key="MenuButton">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="#c3cee0" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderThickness="0,0,0,0.5" BorderBrush="#c3cee0" Background="{TemplateBinding Background}" Padding="0,20">
                        <Grid>
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#333333"/>
                            <Setter Property="Foreground" Value="#EF3F3F" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type Button}" x:Key="MenuButtonSelected">
        <Setter Property="Background" Value="#333333" />
        <Setter Property="Foreground" Value="#EF3F3F" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderThickness="0,0,0,0.5" BorderBrush="#c3cee0" Background="{TemplateBinding Background}" Padding="0,20">
                        <Grid>
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type Button}" x:Key="IconButton">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="#666666" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderThickness="0" Background="{TemplateBinding Background}">
                        <Grid>
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type TextBlock}" x:Key="IconFont">
        <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome" />
        <Setter Property="FontSize" Value="25" />
    </Style>

</ResourceDictionary>
16.807 Beiträge seit 2008
vor 7 Jahren

Alles, was wiederkehrend ist, sollte ausgelagert werden.
Dazu gehören zB. auch Farben etc. Ansonsten musst das ja an 500 Stellen ändern und vergisst zig, wenn Du es mal ändern solltest.
Der Mehraufwand am Anfang ist zudem geringer als die Refaktorierung. Daher lohnt sich das.

5.657 Beiträge seit 2006
vor 7 Jahren

Hi resper,

abgesehen davon lagere ich z.B. auch in XAML definierte Icons in Resourcen-Dateien aus, selbst wenn sie nur an einer Stelle verwendet werden. Dadurch bleiben die Views überschtlicher. Außerdem hab ich meistens mehrere Resourcen-Dateien, z.B. Styles.xaml, Icons.xaml, Templates.xaml usw.

Ansonsten würde sich mein Code von deinem noch dadurch unterschieden, daß ich Commands statt Events verwende, wegen MVVM (siehe [Artikel] MVVM und DataBinding).

Weeks of programming can save you hours of planning

R
resper Themenstarter:in
33 Beiträge seit 2017
vor 7 Jahren

Danke für Eure Tipps.

Außerdem hab ich meistens mehrere Resourcen-Dateien, z.B. Styles.xaml, Icons.xaml, Templates.xaml usw.

Daran habe ich auch schon gedacht und grübel noch über eine Struktur nach.

Ansonsten würde sich mein Code von deinem noch dadurch unterschieden, daß ich Commands statt Events verwende, wegen MVVM

Werde ich mir mal zu Gemüte führen.

Dazu gehören z.B. auch Farben etc.

Werde ich nachholen.

Zwei weitere Fragen:

  1. Warum kann ich eigentlich beim Textblock in der Resourcendatei kein Border Effekt hinzufügen, hätte gerne den Teil mit dem Border Effect ausgelagert.

  2. Meine Buttons für die linke Seite sehen ja so aus:

<Button x:Name="ManageAccounts" Click="ManageAccounts_Click" Style="{StaticResource MenuButton}">
    <StackPanel Orientation="Vertical">
        <TextBlock Text="&#xf0c0;" HorizontalAlignment="Center" Style="{StaticResource IconFont}"/>
        <TextBlock Text="Nutzerverwaltung" HorizontalAlignment="Center" Margin="0,5,0,0"/>
    </StackPanel>
</Button>

Kann ich in der Resource Datei die beiden TextBlock Elemente in der Button Definition mitgestalten?

<Style TargetType="{x:Type Button}" x:Key="MenuButton">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="#c3cee0" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderThickness="0,0,0,0.5" BorderBrush="#c3cee0" Background="{TemplateBinding Background}" Padding="0,20">
                    <Grid>
                        <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#333333"/>
                        <Setter Property="Foreground" Value="#EF3F3F" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>