Styles in wpf

simsenVejle

Active member
Joined
Feb 14, 2021
Messages
38
Programming Experience
Beginner
Hi,
Right now I'm trying to use styles in my very new wpf solutions.

I have problems with the Trigger IsMouseOver background color. Even when using another background color it still shows Windows blue on mouse over. Do I have to set another property for the mouse over blue color?

My app.xaml properties

C#:
<Application x:Class="AnsiBug.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:AnsiBug"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--#region Buttons -->       
        <!--Almindelige knapper-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="#005b7f"/>
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Margin" Value="3" />
            <Setter Property="Padding" Value="5 5 5 5" />
        </Style>
        
        <!--Top Menu knapper-->
        <Style TargetType="Button" x:Key="TopMenuButton">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />           
            <Setter Property="Width" Value="120" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Padding" Value="5 0 2 2" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="White" />
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <!--Top SubMenu knapper-->
        <Style TargetType="Button" x:Key="TopSubMenuButton">
            <Setter Property="Background" Value="#005b7f"/>
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="Width" Value="120" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Padding" Value="5 2 2 0" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#005b7f" />
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <!--#endregion-->
    </Application.Resources>
</Application>

My MainWindow (the two first images are logos you can put every image you want. The Divider image I have attached.

C#:
<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Name="AnsiBug"  x:Class="AnsiBug.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:AnsiBug"
        mc:Ignorable="d"
        Title="MainWindow" Height="800" Width="1200" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <!--Base Button Style-->
    </Window.Resources>
    <StackPanel>
        <Border BorderBrush="Black" BorderThickness="2">
        <Grid Margin="5" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="250"/>
            </Grid.ColumnDefinitions>
                <Image Source="/Images/Logo/ANSI.gif" HorizontalAlignment="Left" Width="200"  Height="80" Grid.Column="0" Margin="0,0,111,125" />
                <Image Source="/Images/Logo/logoBug.gif" HorizontalAlignment="Right" Width="150" Height="80" Grid.Column="2" Margin="158,0,0,149" />
                <Grid Grid.Column="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />                           
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
                            <Button x:Name="BtnProjects" Content="Projekter" Style="{StaticResource TopMenuButton}" />
                            <Image Source="/Images/TopDivider.jpg" />
                            <StackPanel x:Name="ProjectsSubMenu">
                                <Button x:Name="BtnDashBoard" Content="Dashboard" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnNewBug" Content="Ny fejl" Style="{StaticResource TopSubMenuButton}" />
                            </StackPanel>

                        </StackPanel>
                    </Grid>
                    
                    <!--Række 0 Projekter-->
                    <!--Række 1-->
                    <!--Række 2-->
                    <!--Række 3-->
                    <!--Række 4-->
                    <!--Række 5-->
                </Grid>
            </Grid>
        </Border>
        <Grid Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Her kommer anden række" />
        </Grid>
    </StackPanel>
</Window>
 

Attachments

  • TopDivider.jpg
    TopDivider.jpg
    8.5 KB · Views: 5
Top Bottom