I have a WPF application that contains a menu. I need to center the title of the menu:
<MenuItem Header="_Paramètres" Height="60" Width="188" FontWeight="Bold" FontSize="16" HorizontalContentAlignment="Center" >
<MenuItem Header="_Régler" Height="30" Width="188" FontWeight="Bold" FontSize="16" Click="regler_Click_1" x:Name="regler" Background="#FF150202" HorizontalContentAlignment="Center" />
</MenuItem>
The menu items are centered but the menu title is not.
How can I do this?
You should set additionally the HorizontalAlignment of the root MenuItem. Like this.
<MenuItem Header="_Paramètres" Height="60" Width="188" FontWeight="Bold" FontSize="16"
HorizontalContentAlignment="Center" HorizontalAlignment="Center" >
<MenuItem Header="_Régler" Height="30" Width="188" FontWeight="Bold" FontSize="16"
Click="regler_Click_1" x:Name="regler" Background="#FF150202"/>
</MenuItem>
Setting the HorizontalAlignment of the sub MenuItems should not be necessary with this code.
You can find some additional information about HorizontalAlignment and HorizontalContentAlignment in the links.
Edit
Ah ok (Q&A in the comments), then the following could probably help.
<MenuItem Header="_Paramètres" Height="60" Width="188" FontWeight="Bold" FontSize="16"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" >
<MenuItem Header="_Régler" Height="30" Width="188" FontWeight="Bold" FontSize="16"
Click="regler_Click_1" x:Name="regler" Background="#FF150202"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"/>
</MenuItem>
Btw you should create a Style, so that you can reuse the settings.
Edit 2
Last idea. If this isn't working, I'll never implement an UI with XAML again. ;o)
<!-- Declare this as resource -->
<Style x:Key="CenteredTextMenuItem" x:TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<DataTemplate>
<TextBox Text={Binding} HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center" FontSize="16" FontWeight="Bold"/>
</DataTemplate>
</Setter>
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="188"/>
</Style>
Usage
<MenuItem Header="_Paramètres" Height="60" Style="{StaticResource CenteredTextMenuItem}" >
<MenuItem x:Name="regler" Header="_Régler" Click="regler_Click_1"
Background="#FF150202" Style="{StaticResource CenteredTextMenuItem}"/>
</MenuItem>
Related
I have four of the same StackPanels in a Grid Layout. (See one of them below)
Is it possible to implement this easier?
How I can get all values or changes from Textboxes in the StackPanel(s)?
Is it possible to bind one Command in the panel to get the changes in the ViewModel?
I think the answer is anything with ItemControl?!
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="2" Margin="50, 90, 0, 0" Height="auto" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin" Value="10,0,0,0"/>
<Setter Property="MinWidth" Value="80"/>
<Setter Property="MinHeight" Value="60"/>
</Style>
</StackPanel.Resources>
<Label Content="2" Width="60" Height="60" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" TextAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" TextAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" TextAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" TextAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</StackPanel>
I have an WPF app written in c#. I need to create a toolbar with a full-width background where the toolbar button in the middle.
Here is my XAML code
<ToolBarPanel ToolBarTray.IsLocked="True"
Style="{StaticResource ContentRoot}">
<ToolBar VerticalAlignment="Center"
HorizontalAlignment="Center"
Loaded="ToolBar_Loaded"
MinWidth="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToolBarTray}}, Path=ActualWidth}">
<StackPanel Orientation="Horizontal">
<Button VerticalAlignment="Center"
Command="{Binding StepBackward}"
ToolTipService.ToolTip="Go to previous page"
ToolTipService.Placement="Mouse"
Height="32">
<fa:FontAwesome Icon="StepBackward"
FontSize="18" />
</Button>
<Button VerticalAlignment="Center"
HorizontalAlignment="Center"
Command="{Binding Backward}"
ToolTipService.ToolTip="Go to first page"
ToolTipService.Placement="Mouse"
Height="32">
<fa:FontAwesome Icon="Backward"
FontSize="18" />
</Button>
<TextBox Text="{Binding PageNumber}"
Width="50"
TextAlignment="Center"
VerticalAlignment="Center"
Padding="0, 4"
IsReadOnly="True"
ToolTipService.ToolTip="Current selected page"
ToolTipService.Placement="Mouse"
Height="32" />
<Label Content="{Binding OfPageCount}"
Padding="5"
Height="32" />
<Button VerticalAlignment="Center"
Command="{Binding Forward}"
ToolTipService.ToolTip="Go to last page"
ToolTipService.Placement="Mouse"
Height="32">
<fa:FontAwesome Icon="Forward"
FontSize="18" />
</Button>
<Button VerticalAlignment="Center"
Command="{Binding StepForward}"
ToolTipService.ToolTip="Go to next page"
ToolTipService.Placement="Mouse"
Height="32">
<fa:FontAwesome Icon="StepForward"
FontSize="18" />
</Button>
<ComboBox ItemsSource="{Binding PageSizes}"
SelectedItem="{Binding SelectedPageSize, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
DisplayMemberPath="Text"
SelectedValuePath="Value"
VerticalAlignment="Center"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
Width="75"
Padding="0, 5"
ToolTipService.ToolTip="Show selected amount of records per page"
ToolTipService.Placement="Mouse"
Height="32" />
<ComboBox ItemsSource="{Binding Pages}"
SelectedItem="{Binding SelectedPage, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
DisplayMemberPath="Text"
SelectedValuePath="Value"
VerticalAlignment="Center"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
Width="75"
Padding="0, 5"
ToolTipService.ToolTip="Go to selected page"
ToolTipService.Placement="Mouse"
Height="32" />
<Label Content="{Binding OfItemCount}"
Padding="5"
Height="32" />
</StackPanel>
</ToolBar>
</ToolBarPanel>
My code show the buttons in the center as expended but the background "ToolBarPanel" does not stretch all the way across my screen as desired.
How can I stretch the background on my ToolBar?
Here's a solution from another SO question
<!-- ... -->
<ToolBar VerticalAlignment="Center"
HorizontalAlignment="Stretch"
MinWidth="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToolBarTray}}, Path=ActualWidth}">
<ToolBar.Resources>
<Style TargetType="{x:Type DockPanel}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</ToolBar.Resources>
<StackPanel Orientation="Horizontal">
<!-- ... -->
To make it work, I had to change the HorizontalAlignment of your ToolBar and set it to Stretch and add the DockPanel style override.
Why changing DockPanel style if you're not even using one? The default WPF ToolBar style uses one, so our code is overriding this inner DockPanel to make sure our content is centered. Note that this style override will be applied to all DockPanel inside your ToolBar children, for now you don't use any but if you add one someday, you'll either want to explicitly set its HorizontalAlignment to Left or remove the DockPanel style override and create your own ToolBar style (inspired from the default style) with a DockPanel HorizontalAlignment set to Center.
I created a button that looks like:
Here is the xaml:
<Button x:Name="InstallButtonContainer" Style="{StaticResource ResourceKey=StyleAppButton}" Grid.Column="3" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Button x:Name="InstallButton" Content="Install" Grid.Column="0"
Style="{StaticResource ResourceKey= StyleDropDownButton}"
ToolTip="{x:Static local:ToolTipStrings.INSTALLBUTTONTOOLTIP}" Click="InstallButton_Click"
ToolTipService.ShowDuration="2000"
Margin="-20,-2,-4.5,-2" Grid.ColumnSpan="2" Width="51" FontFamily="Calibri" />
<Button x:Name="DropdownButton" Grid.Column="1" Margin="18,-2,-20,-2"
Width="14" Click="load_install_dropdown" Style="{StaticResource ResourceKey= StyleDropDownButton}">
<Button.ContextMenu>
<ContextMenu x:Name="ButtonContextMenu">
<MenuItem Header="Install" Click="BaseReleaseInstallContextMenuClick" x:Name="MultiInstallBtn">
<MenuItem.Icon>
<Image Width="12" Height="12">
<Image.Source>
<ImageSource>Resources/install.ico</ImageSource>
</Image.Source>
</Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Silent Install" Click="BaseReleaseSilentInstallContextMenuClick" x:Name="MultiInstallSilentBtn">
<MenuItem.Icon>
<Image Width="12" Height="12">
<Image.Source>
<ImageSource>Resources/install.ico</ImageSource>
</Image.Source>
</Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Download" Click="BaseReleaseMultipleDownloadContextMenuClick">
<MenuItem.Icon>
<Image Width="12" Height="12">
<Image.Source>
<ImageSource>Resources/Down.png</ImageSource>
</Image.Source>
</Image>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Button.ContextMenu>
<StackPanel Orientation="Horizontal">
<Path x:Name="BtnArrow" Margin="-3,-10" VerticalAlignment="Center" Width="8" Height="10" Fill="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
Stretch="Uniform" HorizontalAlignment="Right"
Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "/>
</StackPanel>
</Button>
</Grid>
</Button>
Now based on some condition, I want to disable the Install and Silent Install buttons through code.
I tried using:
if(condition)
{
MultiInstallBtn.IsEnabled = false;
}
but it does not seems to work. Is there anything wrong in the way I am accessing it?
As long as that code is in the code behind of the control then it should work.
I notice that there may be some custom styling being applied too. Could it be that you are missing styling for the menu item disabled state? So the menu item is actually disabled, but visually it doesn't present in a different way?
Check that in the style or control template for the Menu Item that it is reacting to the control's IsEnabled property or that there's a "Disabled" VisualState defined.
I am Working with WPF MVVM
I made the following DataTemplate:
<DataTemplate DataType="{x:Type r:CustomControl}">
<Border x:Name="bord" BorderThickness="0" Width="150" Height="150" Margin="0"
BorderBrush="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Background}"
Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type con:Control}, Mode=FindAncestor}, Path=TileColorPair[0]}"
ContextMenu="{StaticResource CMenu}">
<Button Width="{Binding Size}" Height="{Binding Size}">
<Button.Template>
<ControlTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="img" Grid.Row="0" Source="{Binding ImageUrl}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="1" Content="{Binding Text}" FontFamily="{DynamicResource DefaultFont}" FontSize="{DynamicResource {x:Static SystemFonts.CaptionFontSizeKey}}"
Foreground="White" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Border>
And I associated a ContextMenu on the Border.
Each menu has an specific Command.
<ContextMenu x:Key="CMenu">
<MenuItem Command="{Binding UpdateCommand}" Header="Update">
<MenuItem.Icon>
<Image Width="45" Height="45" Source="/Assembly;component/Resources/edit.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Command="{Binding SelectCommand}" Header="Select">
<MenuItem.Icon>
<Image Width="45" Height="45" Source="/Assembly;component/Resources/search.png" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
How do I Bind the Event from the Right Click that activates the ContextMenu to the Left Click as well?
Create a new left button handler on the Border element:
<Border x:Name="Win"
Width="40"
Height="40"
Background="Purple"
MouseLeftButtonUp="UIElement_OnMouseLeftButtonUp">
and then add this:
private void UIElement_OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
var mouseDownEvent =
new MouseButtonEventArgs(Mouse.PrimaryDevice,
Environment.TickCount,
MouseButton.Right)
{
RoutedEvent = Mouse.MouseUpEvent,
Source = Win,
};
InputManager.Current.ProcessInput(mouseDownEvent);
}
What it does, it basically maps the left-click into right-click.
How to align text in a menu item? I tried with vertical content alignment, but didn't work. It worked only for Button and TextBox.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="652" Width="1054">
<Grid HorizontalAlignment="Center" Height="617" Width="1041">
<Grid.Background>
<ImageBrush ImageSource="/WpfApplication4;component/Images/hp-colorful-books-hd-105609.jpg" />
</Grid.Background>
<ToolBarPanel Height="42" HorizontalAlignment="Left" Margin="1,91,0,0" Name="toolBarPanel1" VerticalAlignment="Top" Width="1043" Background="#FFEEEEEE" />
<Grid Height="472" HorizontalAlignment="Left" Margin="1,133,0,0" Name="grid1" VerticalAlignment="Top" Width="213" Background="#FFF0F0F0">
<MenuItem Height="40" Name="menuItem1" Width="209" BorderBrush="{x:Null}" Header="Folder" FontSize="15" FontWeight="Normal" FontStretch="Expanded" FontFamily="Verdana" FontStyle="Normal" VerticalAlignment="Top" HorizontalContentAlignment="Right" FlowDirection="LeftToRight" Padding="1" Margin="1,0,3,0" VerticalContentAlignment="Bottom" >
<MenuItem.Icon>
<Image Source="/WpfApplication4;component/Images/Computer.png" />
</MenuItem.Icon>
</MenuItem>
</Grid>
</Grid>
Try this
<MenuItem.Header>
<TextBlock Text="Header" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</MenuItem.Header>