I have an application that I am writing and its for the most part still in mockup so there is not much c# behind it.
I'm noticing a strange 1px border or separator between two sections of my window that according to the XAML should not be there, nor is it there at design time, but at run sure enough I can't get rid of it. (annotated by red arrow)
Main windows XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DS4Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" xmlns:Forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:tb="http://www.hardcodet.net/taskbar" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d" x:Class="DS4Windows.MainWindow"
Title="DS4Windows DSDCS Build" Height="519" Width="965" WindowStyle="None" ResizeMode="NoResize" MinWidth="800" MinHeight="519">
<Window.Background>
<ImageBrush ImageSource="Backgrounds/BlueBG2.jpg" Stretch="UniformToFill"/>
</Window.Background>
<Window.Effect>
<DropShadowEffect/>
</Window.Effect>
<DockPanel Margin="0">
<DockPanel.Background>
<ImageBrush/>
</DockPanel.Background>
<DockPanel x:Name="TopPanel" Height="92" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Top" MouseDown="WindowDrag">
<DockPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7F000000" Offset="0"/>
<GradientStop Offset="1" Color="#00000000"/>
</LinearGradientBrush>
</DockPanel.Background>
<Image x:Name="ProgramIcon" Height="100" VerticalAlignment="Top" Width="100" Source="Icons/Icon.png" StretchDirection="DownOnly"/>
<Menu x:Name="MainMenu" VerticalAlignment="Top" DockPanel.Dock="Bottom" Opacity="0.9" FontSize="14">
<MenuItem x:Name="FileMenu" Header="File">
<MenuItem Header="Quit"/>
</MenuItem>
<MenuItem x:Name="ToolsMenu" Header="Tools"/>
<MenuItem x:Name="HelpMenu" Header="Help"/>
<MenuItem x:Name="AccountMenu" Header="My Account" SubmenuClosed="AccountMenu_SubmenuClosed">
<MenuItem x:Name="UsernameMenuItem" Template="{DynamicResource NoHoverMenu}">
<MenuItem.Header>
<StackPanel Orientation="Horizontal">
<Label Content="Username" Width="76" Padding="0"/>
<TextBox x:Name="UsernameInput" Width="134"/>
</StackPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem x:Name="PasswordMenuItem" Template="{DynamicResource NoHoverMenu}">
<MenuItem.Header>
<StackPanel Orientation="Horizontal">
<Label Content="Password" Width="76" Padding="0"/>
<PasswordBox x:Name="PasswordInput" Width="134"/>
</StackPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem x:Name="LoginMenuStatus" Header="" Template="{DynamicResource NoHoverMenu}" Foreground="#FF515151" FontSize="11" Visibility="Collapsed"/>
<MenuItem x:Name="LoginButtonMenuItem" Template="{DynamicResource NoHoverMenu}">
<MenuItem.Header>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click"/>
</MenuItem.Header>
</MenuItem>
<Separator x:Name="LoginMenuSeperator"/>
<MenuItem x:Name="RegisterAccountMenuItem" Header="Register account"/>
<MenuItem x:Name="ForgotLoginMenuItem" Header="Forgot login"/>
<MenuItem x:Name="LogoutMenuItem" Header="Logout" Visibility="Collapsed" Click="LogoutMenuItem_Click"/>
</MenuItem>
</Menu>
<Label x:Name="WindowTitle" Content="DS4Windows DSDCS Build (1.5 ALPHA)" Height="30" Margin="5,5,100,0" VerticalAlignment="Top" DockPanel.Dock="Top" FontSize="14" Foreground="White" HorizontalAlignment="Center"/>
<StackPanel x:Name="ExitMenu" Width="100" DockPanel.Dock="Right" Margin="0,-35,0,0" RenderTransformOrigin="0.525,0.211" HorizontalAlignment="Right" MouseLeave="StackPanel_MouseLeave" Panel.ZIndex="2">
<Button x:Name="CloseButton" Content="X" Height="22" VerticalAlignment="Top" Margin="0,5,5,0" Background="#FFFF7878" FontWeight="Bold" Click="CloseButton_Click" RenderTransformOrigin="0.45,0.421" HorizontalAlignment="Right" Width="22" MouseEnter="CloseButton_MouseEnter"/>
<Button x:Name="MinimizeCloseOpt" Content="Minimize to tray" Visibility="Hidden" Click="MinimizeCloseOpt_Click"/>
<Button x:Name="QuitCloseOpt" Content="Quit" Visibility="Hidden" Click="QuitCloseOpt_Click"/>
</StackPanel>
<Label x:Name="UsernameLabel" Content="Guest" Height="28" VerticalAlignment="Bottom" DockPanel.Dock="Right" Margin="0,0,-100,0" HorizontalAlignment="Right" Foreground="White"/>
</DockPanel>
<DockPanel x:Name="Footer" Height="28" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Bottom">
<Image VerticalAlignment="Bottom" DockPanel.Dock="Right" Source="Icons/ResizeGrip.png" Stretch="None" HorizontalAlignment="Right" PreviewMouseLeftButtonDown="WindowResize" Cursor="SizeNWSE">
<Image.OpacityMask>
<ImageBrush ImageSource="Icons/ResizeGrip.png" Stretch="None"/>
</Image.OpacityMask>
</Image>
</DockPanel>
<DockPanel x:Name="AddPanel" Height="94" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Frame Content="Frame" Height="90" VerticalAlignment="Top" Width="728" Source="http://dsdcs.com/index.php?template=frontend" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
</DockPanel>
<DockPanel x:Name="SidebarDockPanel" Background="#CCFFFFFF" Margin="0">
<StackPanel Height="305" VerticalAlignment="Top" Margin="0">
<telerik:RadOutlookBarItem Header="Home" Icon="Icons/Home.ico" IsSelected="True" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
<telerik:RadOutlookBarItem Header="Macros" Icon="Icons/Macros.ico" Height="38" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
<telerik:RadOutlookBarItem Header="Log" Icon="Icons/Log.ico" Height="38" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
<telerik:RadOutlookBarItem Header="Settings" Icon="Icons/Settings.ico" Height="38" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
</StackPanel>
</DockPanel>
<DockPanel x:Name="MainWinDockPanel" Background="#CCFFFFFF">
<Expander x:Name="CurrentGameWindow" Header="Currently Playing: Nothing" VerticalAlignment="Bottom" DockPanel.Dock="Bottom" Background="#B2000000" Foreground="White" FontWeight="Bold" FontSize="14" Panel.ZIndex="1" BorderBrush="{x:Null}" BorderThickness="0">
<DockPanel Height="128" VerticalAlignment="Top" DockPanel.Dock="Bottom" UseLayoutRounding="False">
<Image x:Name="CurrentGameBoxart" Height="128" VerticalAlignment="Top" RenderOptions.BitmapScalingMode="HighQuality">
<Image.OpacityMask>
<ImageBrush ImageSource="TempImages/5647-1.jpg"/>
</Image.OpacityMask>
</Image>
<Grid x:Name="CurrentGameBGFrame" Margin="0">
<Image x:Name="CurrentGameRating" HorizontalAlignment="Left" Height="16" Margin="12,55,0,0" VerticalAlignment="Top" Width="80"/>
<Label x:Name="CurrentGamePublisher" Content="" HorizontalAlignment="Left" Margin="12,3,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
<Label x:Name="CurrentGameDeveloper" Content="" HorizontalAlignment="Left" Margin="12,24,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
<Label x:Name="CurrentGameGenres" Content="" HorizontalAlignment="Left" Margin="329,3,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
<Label x:Name="CurrentGamePlayers" Content="" HorizontalAlignment="Left" Margin="329,24,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
</Grid>
</DockPanel>
</Expander>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<Frame x:Name="MainNav" Content="Frame" Source="/DS4Windows;component/Pages/Home.xaml" BorderThickness="0" Margin="0"/>
</ScrollViewer>
</DockPanel>
</DockPanel>
</Window>
Child page XAML:
<Page x:Class="DS4Windows.Pages.Home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Title="Home" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel x:Name="ControllerStack" Margin="0">
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon1" Width="61" Source="/DS4Windows;component/ControllerStates/wireless-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter1" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFF4C4C" Offset="0"/>
<GradientStop Color="#FF830000" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus1" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon2" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter2" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37E03F" Offset="0"/>
<GradientStop Color="#FF1F9524" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus2" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon3" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter3" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37E03F" Offset="0"/>
<GradientStop Color="#FF1F9524" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus3" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon4" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter4" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37E03F" Offset="0"/>
<GradientStop Color="#FF1F9524" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus4" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Page>
If you want to understand why things in WPF looking odd or how they render you should take a look at Snoop.
Hint: If you want to jump to the current Control move the mouse over it and press Shift + Ctrl
So, not an 100% answer to the question of why, but a fix; I added both the sidebar and main window dock panels to a new parent dockpanel control ans set the opaque background on that wrather the child controls. This got rid of the border which I suspect was actually a gap.
The why, at least I think; With all child and parent controls on the sidebar set to auto the width was being determined by calculating the width of the button string + image + padding. Since WPF is hardware rendered the width could have calculated it with aliasing considered and the response may have been a floating point number rather than an integer like if I manually set the width myself. so with a floating point width the aliasing of the two adjacent controls likely caused a fraction of a pixel width of background to show through, result in a 1px line or border as I thought it was. And since design time renders the control in SW mode this was never seen until the application was actually run.
Not sure if its taboo to answer my own ? but I figured I would for others sake who may come here with same issue.
The answers in this question may be helpfull
How to fix empty space between a border and a background in button with rounded corners?
WPF renders the elements with anti-aliasing by default and this can
result in small gaps between shapes.
Set the EdgeMode to Aliased on your Border this should get rid
of the small gap
RenderOptions.EdgeMode="Aliased"
Related
I am trying to set an image as a background of my window. I want to apply a gradient opacity mask over the window, and have the image tiled. So far, I can get either or, but not both. Here's my lame attempt at this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "40*" />
<RowDefinition Height="133*"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Image x:Key="myImage" Source="/GrimshawRibbon;component/Resources/GeometricBackground.png">
<Image.OpacityMask>
<LinearGradientBrush EndPoint = "0.5,0" StartPoint="0.5,1">
<GradientStop Color = "#00000000" Offset="0.6"/>
<GradientStop Color = "#FF000000" Offset="1"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<ImageBrush x:Key="imageBrush" ImageSource="/GrimshawRibbon;component/Resources/GeometricBackground.png" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,800,800"/>
<VisualBrush x:Key="myBrush" Visual="{StaticResource myImage}" Stretch="None" TileMode="Tile"/>
</Grid.Resources>
<DockPanel LastChildFill = "False" Grid.RowSpan="2" Background="{StaticResource imageBrush}"/>
<ContentControl x:Name="MainContentControl" Content="{Binding CurrentPageViewModel}" Margin="10" Grid.Row="1"/>
<Button x:Name="btnCancel" Content="Close" Margin="0,0,90,10" HorizontalAlignment="Right" Width="75" Height="36" VerticalAlignment="Bottom" Command="{Binding CloseWindowCommand, Mode=OneWay}" CommandParameter="{Binding ElementName=win}" Grid.Row="1"/>
<Button x:Name="button" Content="?" Margin="0,0,170,10" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="36" Command="{Binding NavigateToHelpCommand, Mode=OneWay}" Grid.Row="1"/>
<Label x:Name="label" Content="Some label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="10,39,0,0" TextWrapping="Wrap" Text="Some tool description that is not too long. It would be good to keep it under two sentences." VerticalAlignment="Top" Height="36" Width="272"/>
</Grid>
You may assign the DockPanel's OpacityMask:
<DockPanel Grid.RowSpan="2" Background="{StaticResource imageBrush}">
<DockPanel.OpacityMask>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0.6"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</DockPanel.OpacityMask>
</DockPanel>
Or probably just use a Rectangle for the background image:
<Rectangle Grid.RowSpan="2" Fill="{StaticResource imageBrush}">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0.6"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
I am wondering is it possible to change the close button on a floating window in wpf? I currently have it like a windows close with white cross and red background. I also have an image of a black cross and wondering is it possible to take off teh red background and white cross and replace it with my image?
<syncfusion:DockingManager x:Name="DockingManager"
PersistState="True"
UseDocumentContainer="True"
Margin="0,0,0,0"
syncfusion:SkinManager.ActiveColorScheme="#E7E7E7"
HeaderForeground="Black"
SelectedHeaderBackground="{DynamicResource selectedHeaderBackground}"
syncfusion:DockingManager.DesiredHeightInFloatingMode="27"
syncfusion:DockingManager.DesiredHeightInDockedMode="27"
FloatWindowMouseOverHeaderBackground="#F6CD1D"
FloatWindowHeaderBackground="#F6CD1D"
HeaderForegroundSelected="Black"
TabItemBackgroundSelected="{DynamicResource headerBackground}"
TabPanelBackground="#FFE7E7E7"
SidePanelBackground="White"
TabItemsForeground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}"
Background="White"
FloatWindowHeaderForeground="{DynamicResource headerBackground}"
TabItemsBackground="{DynamicResource headerBackground}"
FloatWindowSelectedHeaderForeground="{DynamicResource headerBackground}"
FloatWindowMouseOverHeaderForeground="{DynamicResource headerBackground}"
HeaderBorderBrush="{x:Null}"
OpacityMask="{DynamicResource headerBackground}"
TabItemsBorderBrush="{DynamicResource headerBackground}"
FloatWindowSelectedHeaderBackground="{DynamicResource headerBackground}"
HeaderBackground="{DynamicResource headerBackground}"
TabItemForegroundSelected="#FF4A515A">
<syncfusion:DockingManager.SideItemsBorderBrush>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEFEEEE" Offset="0"/>
<GradientStop Color="#E7000000"/>
</LinearGradientBrush>
</syncfusion:DockingManager.SideItemsBorderBrush>
<dockWindow:LocationMap x:Name="Locationmap"
syncfusion:DockingManager.DesiredHeightInDockedMode="100"
Background="White"
syncfusion:DockingManager.SideInDockedMode="Left"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.DesiredWidthInDockedMode="300" FontWeight="Bold" FontSize="10.667">
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
<Image Source="Images/Earth.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="Location Map" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
<dockWindow:LocationMap.Foreground>
<ImageBrush />
</dockWindow:LocationMap.Foreground>
</dockWindow:LocationMap>
<dockWindow:Tornado x:Name="TornadoDiagram"
syncfusion:DockingManager.SideInDockedMode="Right"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.DesiredWidthInDockedMode="400"
syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold">
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
<Image Source="Images/Tornado1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="Tornado Diagram" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
</dockWindow:Tornado>
<dockWindow:Cdf x:Name="CdfDiagram"
syncfusion:DockingManager.SideInDockedMode="Bottom"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.TargetNameInDockedMode="TornadoDiagram"
syncfusion:DockingManager.DesiredWidthInDockedMode="400"
syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold" >
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left" Margin="1"/>
<Image Source="Images/CDF1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1"/>
<TextBlock Text="CDF" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2"/>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Right" Margin="1"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
</dockWindow:Cdf>
So the best way to do this is to create custom windows yourself and then this allows you to create the window exactly how you want it. It's bit longer than a simple change of one thing in the XAML but it works
So I'm creating a small wpf application for fun, and I want it to have a menu. I created the menu and what not, but when I run the program the menu doesn't show up at all. The code for the menu is currently:
<Window x:Class="TBA_Alpha.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TBA LogIn" Height="350" Width="525">
<Grid>
<PasswordBox x:Name="tbPsw" HorizontalAlignment="Left" Margin="214,143,0,0" VerticalAlignment="Top" Width="133" SelectionBrush="Black" Background="White">
<PasswordBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</PasswordBox.BorderBrush>
</PasswordBox>
<TextBox x:Name="tbUId" HorizontalAlignment="Left" Height="23" Margin="214,94,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="133" SelectionBrush="Black">
<TextBox.Background>
<SolidColorBrush Color="White"/>
</TextBox.Background>
<TextBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<Button Content="LogIn" HorizontalAlignment="Left" Margin="239,200,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBlock HorizontalAlignment="Left" Margin="214,73,0,0" TextWrapping="Wrap" Text="Your UserID:" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" Margin="214,122,0,0" TextWrapping="Wrap" Text="Your Password:" VerticalAlignment="Top"/>
<Menu HorizontalAlignment="Left" Height="25" VerticalAlignment="Top" Width="43" BorderThickness="1">
<MenuItem Header=" New " RenderTransformOrigin="0.5,0.5" Width="63" Height="36" Background="White" Visibility="Visible" AllowDrop="True" IsHitTestVisible="True">
<MenuItem Header=" User " Click="newUser"/>
</MenuItem>
</Menu>
</Grid>
any help whatsoever would be largely appreciated thank-you.
Edit: added the entire XAML code for the wpf, where the menu is near the end of the code
Edit: after removing all of the additional stuff and leaving only the headers, still experiencing the same problem
Edit: Tried the code in a different clean project and it worked, thank-you
The problem is that most of your controls use a Magrin attribute to separate themselves, rather than the functionality of the Grid. Since none of them specify the attached properties Grid.Row, they're all in the same row. Since Menu doesn't specify a Margin, it's at the top of the Grid and thus overlapping your other controls.
Try using actual grid rows
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<PasswordBox x:Name="tbPsw" HorizontalAlignment="Left" Grid.Row="0" VerticalAlignment="Top" Width="133" SelectionBrush="Black" Background="White">
<PasswordBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</PasswordBox.BorderBrush>
</PasswordBox>
<TextBox x:Name="tbUId" HorizontalAlignment="Left" Height="23" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Width="133" SelectionBrush="Black">
<TextBox.Background>
<SolidColorBrush Color="White"/>
</TextBox.Background>
<TextBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<Button Content="LogIn" HorizontalAlignment="Left" Grid.Row="2" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBlock HorizontalAlignment="Left" Grid.Row="3" TextWrapping="Wrap" Text="Your UserID:" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" Grid.Row="4" TextWrapping="Wrap" Text="Your Password:" VerticalAlignment="Top"/>
<Menu Grid.Row="5" HorizontalAlignment="Left" Height="25" VerticalAlignment="Top" Width="43" BorderThickness="1">
<MenuItem Header=" New " RenderTransformOrigin="0.5,0.5" Width="63" Height="36" Background="White" Visibility="Visible" AllowDrop="True" IsHitTestVisible="True">
<MenuItem Header=" User " Click="newUser"/>
</MenuItem>
</Menu>
</Grid>
I build an image gallery in WPF, main window is simply a grid of images, i want to draw a zoom icon overlay at corner of image, and when user click on this icon, this icon will capture click event instead of image. I'm quite new to WPF, so please show me a good approach for this.
Here is xaml file
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Image Gallery" Height="350" Width="525" WindowState="Maximized">
<Window.Resources>
<ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
<UniformGrid Columns="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></UniformGrid>
</ItemsPanelTemplate>
<DataTemplate x:Key="ListImageDataTemplate">
<Grid HorizontalAlignment="Left" Width="230" Height="230">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center">
<!--View Large Image on Image Control Tooltip-->
<Image.ToolTip>
<StackPanel Background="Black">
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200"></Image>
<TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" Margin="15,0,15,0"></TextBlock>
</StackPanel>
</Image.ToolTip>
</Image>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name="lbImageGallery" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}" ItemsPanel="{DynamicResource ImageGalleryItemsPanelTemplate}" ItemTemplate="{StaticResource ListImageDataTemplate}">
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF1E2A2F" Offset="1"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
</Grid>
</Window>
OK, download an icon, and add it to your project (Images\overlay.jpg). The DataTemplate now looks like this
<DataTemplate x:Key="ListImageDataTemplate">
<Grid HorizontalAlignment="Left" Width="230" Height="230">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<Grid>
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" />
<!--Show the overlay at the Bottom Right corner-->
<StackPanel Background="Black" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Image Source="Images/overlay.jpg" Stretch="Fill" Height="40" Width="40"></Image>
<!--<TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" />-->
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
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>