CODEWITHSUNDEEP
c#wpfxamlmenu
Kamil Solecki
Kamil Solecki

Reputation: 1117

WPF MenuItem apply style to boxed header

I'm currently trying to apply styling to my menuItem. I had to center it's header inside the control, and the only way to it that I had found is this:

<MenuItem>
    <MenuItem.Header>
        <TextBlock Text="About" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </MenuItem.Header>
</MenuItem>

Now, I am trying to apply styles, but I can't seem to manage to bind the textboxes' text from style to the actual xaml value.

My style:

<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="#0a99f3" />
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Grid Background="{TemplateBinding Background}">
                            <MenuItem>
                                <MenuItem.Header>
                                    <TextBlock Text="{TemplateBinding Text}" />
                                </MenuItem.Header>
                            </MenuItem>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

TemplateBinding is just one of the approaches I tried, though none worked even remotely close.

EDIT - FULL XAML ON REQUEST:

<Window x:Class="DownloadManager.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:DownloadManager"
        xmlns:controls="clr-namespace:DesignInControl"
        mc:Ignorable="d"
        Title="MainWindow" Height="700" Width="1000" Background="#22282a" ResizeMode="NoResize">
    <Border BorderThickness="1" BorderBrush="#ffcd22" Margin="10,10,10,10">
        <Grid>
            <controls:CircularProgressBar VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" SegmentColor="#ffcd22" StrokeThickness="5" Percentage="100" Radius="80" Grid.ZIndex="0"/>
            <Border VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" Width="170" Height="170">
                <TextBlock FontSize="60" Text="10%" FontFamily="simplifica" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Image x:Name="noshare_png" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-8,10" Source="noshare.png" Width="100" Height="100"/>
            <Border Width="210" Height="100" Margin="97,10,665,540">
                <TextBlock Text="NoShare" FontSize="85" FontFamily="simplifica" Foreground="#ffcd22" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
            <Menu x:Name="menu" HorizontalAlignment="Left" Height="100" Margin="352,10,0,0" VerticalAlignment="Top" Width="600" FontFamily="simplifica" FontSize="30">
                <MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
                    <MenuItem.Header>
                        <TextBlock Text="File"/>
                    </MenuItem.Header>
                </MenuItem>
                <MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
                    <MenuItem.Header>
                        <TextBlock Text="Settings"/>
                    </MenuItem.Header>
                </MenuItem>
                <MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
                    <MenuItem.Header>
                        <TextBlock Text="About"/>
                    </MenuItem.Header>
                </MenuItem>
            </Menu>
        </Grid>
    </Border>
</Window>

Upvotes: 0

Views: 10093

Answers (1)

Jai
Jai

Reputation: 8363

Use MenuItem.HeaderTemplate.

<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="#0a99f3" />
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </Style.Triggers>
</Style>

Updated: Combined your style with the original solution.

Upvotes: 3

Related Questions