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.
Related
Hello I am currently using library Mahapps but I have some problems. How can I pop out the flyout when clicking the "Menu 1" MenuItem? I tried with the following code but it did not work.
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem x:Name="FlyoutOverview" Header="Menu 1" IsCheckable="True" Click="flyoutOverview">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="GlobeWire"/>
</MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Header="Menu 2"/>
<Separator/>
<MenuItem Header="Menu 3">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="People"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu 4">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="UserDelete"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu 5">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="ControlResume"/>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
If you have followed the tutorial links I provided then I suppose you are able to create a simple View and its ViewModel.
The View can be a Window and has its Grid content like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Controls:FlyoutsControl Grid.Column="1">
<Controls:Flyout x:Name="yourMahAppFlyout" Header="Flyout" Background="AliceBlue" Position="Right" Width="350"
IsOpen="{Binding ElementName=FlyoutOverview, Path=IsChecked}">
<TextBlock Text="My Flyout is here" />
</Controls:Flyout>
</Controls:FlyoutsControl>
<ListBox Grid.Row="0" Grid.Column="0" ItemsSource="{Binding NameList}">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem x:Name="FlyoutOverview" Header="Menu 1" IsCheckable="True"
IsChecked="{Binding IsMenuItem1Checked}">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="GlobeWire"/>
</MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Header="Menu 2"/>
<Separator/>
<MenuItem Header="Menu 3">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="People"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu 4">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="UserDelete"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu 5">
<MenuItem.Icon>
<iconPacks:PackIconModern Kind="ControlResume"/>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
</Grid>
The ViewModel can have these properties:
public MainWindowViewModel()
{
NameList = new ObservableCollection<string>()
{
"John", "Micheal", "Jack"
};
}
public ObservableCollection<string> NameList { get; set; }
public bool IsMenuItem1Checked
{
get { return _isMenuItem1Checked; }
set { SetProperty(ref _isMenuItem1Checked, value); }
}
The first menu item in the listbox binds its "IsChecked" property to "IsMenuItem1Checked" in ViewModel, and FlyOut "IsOpen" property binds to "IsChecked" of that menu item.
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 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>
I have a panel withing a WindowsFormHost in a WPF app. Eventually i need to be able to click and draw points. I had it working fully in a separate WinForm form... but for some reason the paint event won't fire at all when Invalidate() is called! The click event is definitely firing as the message box comes up on the click. Not a peep out of the paint even though. Can't figure out why for the life of me... here's the code.
XML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
Title="MainWindow" Height="1000" Width="1000"
WindowState="Maximized" SizeChanged="Window_SizeChanged" LocationChanged="Window_LocationChanged" Background="Gray">
<DockPanel LastChildFill="True">
<ToolBarTray DockPanel.Dock="Top">
<ToolBar Width="Auto" HorizontalAlignment="Stretch">
<Menu>
<MenuItem Header="File" VerticalAlignment="Center">
<MenuItem Header="New" Click="MenuItem_Click_3" />
<MenuItem Header="Open" Click="MenuItem_Click_4"/>
<MenuItem Header="Open Recent">
<MenuItem Header="Some Recent Files"/>
</MenuItem>
<MenuItem Header="Import H2OFate File" Click="MenuItem_Click_7"/>
<Separator/>
<MenuItem Header="Save" Click="MenuItem_Click_1" />
<MenuItem Header="Save As" Click="MenuItem_Click_5"/>
<MenuItem Header="Save without Results"/>
<MenuItem Header="Delete Unnecessary Files"/>
<Separator/>
<MenuItem Header="File Options"/>
<Separator/>
<MenuItem Header="Project Info"/>
<MenuItem Header="Supply Info" />
<Separator/>
<MenuItem Header="Print" Click="MenuItem_Click_6" />
<Separator/>
<MenuItem Header="Reload Current File"/>
<MenuItem Header="Exit CTRL+Q" Click="MenuItem_Click"/>
</MenuItem>
<MenuItem Header="Network Design" VerticalAlignment="Center">
<MenuItem Header="Something" Click="MenuItem_Click_8"/>
</MenuItem>
<MenuItem Header="Run Analysis" VerticalAlignment="Center">
<MenuItem Header="Run" Click="MenuItem_Click_2"/>
</MenuItem>
<MenuItem Header="View Results" VerticalAlignment="Center">
<MenuItem Header="Numeric"/>
<MenuItem Header="X-Y Plots"/>
<MenuItem Header="Contours"/>
<MenuItem Header="Reports"/>
</MenuItem>
<MenuItem Header="Facilities Management" VerticalAlignment="Center">
<MenuItem Header="Some Item"/>
<MenuItem Header="Hydraulics"/>
<MenuItem Header="Contamination"/>
<MenuItem Header="Sensor Placement"/>
</MenuItem>
<MenuItem Header="Tools/Databases" VerticalAlignment="Center">
<MenuItem Header="Some Item"/>
<MenuItem Header="Hydraulics"/>
<MenuItem Header="Contamination"/>
<MenuItem Header="Sensor Placement"/>
</MenuItem>
<MenuItem Header="Help" VerticalAlignment="Center">
<MenuItem Header="Some Item"/>
<MenuItem Header="Help"/>
<MenuItem Header="Units"/>
<MenuItem Header="Demo Examples"/>
<MenuItem Header="Tutorial"/>
<MenuItem Header="How To"/>
<MenuItem Header="About"/>
</MenuItem>
</Menu>
</ToolBar>
<ToolBar>
<Button Height="38" Width ="50" VerticalAlignment="Center" Click="Button_Click_1">
<Ellipse Width="25" Height="25" Fill="Blue" Stroke="Black" VerticalAlignment="Center"/>
</Button >
<Button Height="38" Width ="50" VerticalAlignment="Center" Click="Button_Click_1">
<Rectangle Width="38" Fill="Red" Height="7" Stroke="Black"/>
</Button >
<Button Height="38" Width ="50" VerticalAlignment="Center" Click="Button_Click_2">
<Polygon Fill="Yellow" Stroke="Black" Points="0,10 30,10 30,0 28,0 28,3 2,3 2,0 0,0" VerticalAlignment="Center"/>
</Button >
<Button Height="38" Width ="50" VerticalAlignment="Center" Click="Button_Click_3">
<Polygon Stroke="Black" Fill="Green" VerticalAlignment="Center" Points="22,0 22,7 15,7 15,15 9,15 9,7 0,7 0,0 "/>
</Button >
</ToolBar>
</ToolBarTray>
<TabControl Width ="1000" DockPanel.Dock="Left">
<TabItem Header="Map">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<WindowsFormsHost Grid.Row="0" x:Name="wfPanel" >
<WindowsFormsHost.Child>
<wf:Panel x:Name="wfSurface" MouseClick="wfSurface_MouseClick"/>
</WindowsFormsHost.Child>
</WindowsFormsHost>
</Grid>
</TabItem>
<TabItem Header="Map Settings">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Content="Testing 123"/>
</Grid>
</TabItem>
</TabControl>
<TabControl DockPanel.Dock="Right">
</TabControl>
</DockPanel>
C#
private void wfSurface_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
Graphics g;
g = wfSurface.CreateGraphics();
epanet epa = epanet.GetInstance();
SolidBrush s = new SolidBrush(System.Drawing.Color.Blue);
g.FillEllipse(s, Convert.ToInt32(epa.xCord), Convert.ToInt32(epa.yCord), 50, 50);
g.FillEllipse(s, 400, 400, 500, 500);
MessageBox.Show("paint event fired");
}
private void wfSurface_MouseClick(object sender, System.Windows.Forms.MouseEventArgs e)
{
epanet epa = epanet.GetInstance();
epa.xCord = e.X;
epa.yCord = e.Y;
MessageBox.Show("xCord is: " + e.X.ToString());
wfSurface.Invalidate();
}
Edit:
And to further check that the paint event is the issue I added the line g.FillEllipse(s,400,400,400,400); into the click event and it successfully drew the ellipse.
Not much of a WPF guy, but my guess would be to add this:
<WindowsFormsHost.Child>
<wf:Panel x:Name="wfSurface" Paint="wfSurface_Paint"
MouseClick="wfSurface_MouseClick"/>
</WindowsFormsHost.Child>
I'm working with a WPF menu and unfortunately whenever I go to set an Icon in Visual Studio designer I receive an exception error.
To work around this I'm trying to set the icon with XAML code, I have the following:
<Menu Height="23" Name="menu1" VerticalAlignment="Top" BorderThickness="0" SnapsToDevicePixels="True" OverridesDefaultStyle="False" Opacity="1">
<MenuItem Header="Help">
<MenuItem Header="About">
<Image Source="Images/Help.png" />
</MenuItem>
</MenuItem>
</Menu>
Unfortunately this creates the following scenario:
I've tried googling the issue but can't see where my XAML has gone wrong. I know this is simple, but I'm stuck!
Is this what you want?
<Menu Height="23" Name="menu1" VerticalAlignment="Top" BorderThickness="0" SnapsToDevicePixels="True" OverridesDefaultStyle="False" Opacity="1">
<MenuItem Header="Help">
<MenuItem Header="About">
<MenuItem.Icon>
<Image Source="Images/Help.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
do you want something like this?
<Menu Height="23" Name="menu1" VerticalAlignment="Top" BorderThickness="0" SnapsToDevicePixels="True" OverridesDefaultStyle="False" Opacity="1">
<MenuItem Header="Help">
<MenuItem>
<MenuItem.Header>
<StackPanel>
<Image Source="Images/Help.png" />
<TextBlock Text="About" />
</StackPanel>
</MenuItem.Header>
</MenuItem>
</MenuItem>
</Menu>