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.
Related
I am trying to build application which has some pictures drawn on buttons. Application looks nice on Windows 7 - as expected, although on Windows 10 it looks differently.
Despite Defined width and height size, image is truncated.
Uploaded screens:
1: Windows 7 vs. Windows 10
2: Windows 7 vs. Windows 10
]2
<Menu x:Name="menu" HorizontalAlignment="Stretch" Height="25" Margin="0,0,0,0" VerticalAlignment="Center" Width="Auto" DockPanel.Dock="Top">
<MenuItem Header="_Soubor" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center">
<MenuItem Click="NewCalculation_Click">
<MenuItem.Header>
<TextBlock Text="_Nová kalkulace" VerticalAlignment="Center"/>
</MenuItem.Header>
<MenuItem.Icon>
<Image Source="graphics/icons/new.ico" Height="35" Width="35" />
</MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Click="saveCalculation_Click">
<MenuItem.Header>
<TextBlock Text="Uložit kalkulaci" VerticalAlignment="Center"></TextBlock>
</MenuItem.Header>
<MenuItem.Icon>
<Image Source="graphics/icons/save.ico" Height="35" Width="35" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Click="LoadCalculation_Click">
<MenuItem.Header>
<TextBlock Text="Načíst kalkulaci" VerticalAlignment="Center"></TextBlock>
</MenuItem.Header>
<MenuItem.Icon>
<Image Source="graphics/icons/load.ico" Height="35" Width="35" />
</MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Click="createReport_Click">
<MenuItem.Header >
<TextBlock Text="Vytvoř report" VerticalAlignment="Center"></TextBlock>
</MenuItem.Header>
<MenuItem.Icon>
<Image Source="graphics/icons/report.ico" Height="35" Width="35" />
</MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Click="endApp_Click">
<MenuItem.Header>
<TextBlock Text="Konec" VerticalAlignment="Center"></TextBlock>
</MenuItem.Header>
<MenuItem.Icon>
<Image Source="graphics/icons/close.ico" Height="35" Width="35" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem Header="_Nastavení" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center">
<MenuItem x:Name="MenuSqlSetting" Header="_Připojení na SQL server" Click="MenuSqlSetting_Click"/>
</MenuItem>
<MenuItem Header="_O aplikaci" Click="MenuItem_Click" />
</Menu>
Code for second screen:
<Button x:Name="buttonRemove" Grid.Column="1" Margin="2,0,0,0" IsEnabled="False" Click="buttonRemove_Click" Background="White">
<StackPanel>
<Image Source="Graphics/remove.png" Width="50" Height="50"/>
</StackPanel>
</Button>
Thanks for any advice.
You should check this article before trying anything. It's all about the theme difference between win 7 and win 10.
https://arbel.net/2006/11/03/forcing-wpf-to-use-a-specific-windows-theme/
There is another workaround from Visual Studio.
You click with the mouse on the MenuItem and you look at the Template in the Property Inspector under the Miscellaneous group.
Then you "Convert to New Resource..."
see the image
so you will get the corresponding xaml transformed as
<MenuItem Command="{Binding YourCmd}" Header="Your Header"
Template="{DynamicResource MenuItemControlTemplate1}" >
Then you can build on your Windows 7 machine and deploy to Windows 10 without such issue.
I have a Popup in a DataTemplate of a GridView.
The DataTemplate has 2 buttons which opens up this Popup. This works perfectly well. But I see some erratic behaviour when the GridView is scrolled.
Popup opened
When GridView is scrolled the popup stays on the page
XAML Code for the GridView ItemTemplate
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Popup x:Name="PagesPopup" IsOpen="{Binding IsPagesPopupOpen}">
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Popup>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
That's expected behavior. PopUp intentionally has a highest z-index to display over all other elements. An easy fix, would be to get rid of the PopUp all together, and move {Binding IsPagesPopupOpen} down to the Grid inside it and use it on that Grid's Visibility with a Visibility Converter instead. Except it would need to be moved to the bottom so it would display above the contents.
To Explain better. Instead of how you have it, do this;
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
<!-- We move it down here to ensure it appears over everything and without having to set a fixed z-index, and add your visibility converter -->
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"
Visibility="{Binding IsPagesPopupOpen, Converter={StaticResource BooleanToVisibilityConverter}}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Grid>
</DataTemplate>
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>
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>