How to remove space between buttons in stackpanel C# xaml? - c#

In xaml layout, it has no spaces between buttons. Howeveri when I test it in emulator or device, there are spaces between buttons. How can I fix this?
<phone:PhoneApplicationPage
x:Class="KentKart.Pages.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Style x:Key="SimpleButton" TargetType="Button">
<Setter Property="Margin" Value=",,,-13"/>
<Setter Property="Padding" Value="40,5,0,5"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="#0079c8"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="#0079c8"/>
</Style>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/Images.xcassets/Background.imageset/bg#2x.png" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
<Grid Background="#0079c8" Height="92" VerticalAlignment="Top">
<TextBlock Width="auto" x:Name="selectedCityText" Foreground="White" Text="" RenderTransformOrigin="-0.243,0.771" FontSize="15" Margin="0,10,0,28" />
</Grid>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<Button Content="X" BorderThickness="0" HorizontalAlignment="Left" Margin="367,0,-12,0" VerticalAlignment="Top" Height="64" Width="113" Click="X_Button" RenderTransformOrigin="0.519,0.125"/>
</StackPanel>
<StackPanel VerticalAlignment="Top" Margin="0,92,0,0">
<Button Style="{StaticResource SimpleButton}" Content="deneme"/>
<Button Style="{StaticResource SimpleButton}" Content="deneme"/>
<Button Style="{StaticResource SimpleButton}" Content="deneme"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
</Grid>
</phone:PhoneApplicationPage>

After a little tweaking, the solution is
<Setter Property="Margin" Value="0,-10,0,-10"/>
You've got a 20 pixel margin to remove. But the 0 for Left and Right are critical, when you leave them blank you can see the defaults are negative (they stick out of the frame). There seems to be a difference in how that's rendered in the designer and on the device.
So there might be an underlying bug worth reporting here.

Related

Could not load file or assembly 'Haley.MVVM, Version=4.0.2.0, Culture=neutral, PublicKeyToken=9b5f4902d3fea17a or one of its dependencies

I am building a WPF project
I've tried to update packages. Rebuilt, build, and clean the project. I have even tried to rewrite some views.
Here is the error:
Could not load file or assembly 'Haley.MVVM, Version=4.0.2.0, Culture=neutral, PublicKeyToken=9b5f4902d3fea17a' or one of its dependencies. The system cannot find the file specified
Here is one of my XAML files where I implemented the language:
<UserControl x:Class="CSGOSettinger.Views.Progresses.GraphicProgress1View"
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"
xmlns:hm="http://schemas.hpod9.com/haley/mvvm"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<Style x:Key="Tlacitko" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="0" BorderBrush="#744da9" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.75" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Label Content="nazevpostupu-kvalitagrafiky" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="20, 0, 0, 0" FontSize="30" FontFamily="Bahnschrift Bold" Foreground="#181818" Background="{x:Null}"/>
<Label Content="{hm:Lang krok1}" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="20, 0, 0, 0" FontSize="16" FontFamily="Bahnschrift Bold" Foreground="#FF717171" Background="{x:Null}"/>
<Button Grid.Row="2" Grid.Column="0" Background="#744da9" Style="{StaticResource Tlacitko}" Content="{hm:Lang pokracovat}" Height="35" Width="160" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,20,0" FontFamily="Bahnschrift" FontSize="16" Foreground="#fff">
<Button.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</Button.Resources>
</Button>
</Grid>
I think the problem might be in the package itself

WPF binding mahapps metro icons in template - Tag binding not working

I have a navbar with several buttons in it. The buttons all use the same style, defined in a ResourceDictionary.
I am trying to add an icon from Mahapps to each button. Each button will need a different kind of icon, which I'd like to set on the view.
In order to achieve this, I need to be able to pass the icon kind to the template via some property of the button.
I am unable to pass the icon kind to the template.
I am testing this on a new project (WPF netcore3.1)
I have seen other posts (post1, post2) that suggest using a rectangle rather than iconPacks, and binding the Visual property of the rectangle using the Tag property of the button:
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source="/IconStyle.xaml" />
</Application.Resources>
<Window x:Class="WpfApp1.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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel>
<Button Style="{StaticResource IconStyle}" Foreground="Red">
<Button.Tag>
<iconPacks:Modern Kind="Home" Width="24" Height="24" />
</Button.Tag>
</Button>
</StackPanel>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1">
<Style x:Key="IconStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal"
DataContext="{Binding RelativeSource={RelativeSource AncestorType=Button}}">
<Rectangle Width="24" Height="24" Fill="{Binding Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{Binding Tag}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe"
FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But doesn't display any icons at all for me.
Any suggestions?
With the IconPacks you don't need the OpacityMask usage. Instead you can work with the PackIconModern control or any other control from the IconPacks package.
Here is an example with only the PackIconModern control from the MahApps.Metro.IconPacks.Modern NuGet package (v4.11.0).
The button style:
<Style x:Key="IconStyle" TargetType="{x:Type Button}">
<Setter Property="Padding" Value="10 5" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FontSize" Value="24" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Segoe UI Light" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<iconPacks:PackIconModern
Kind="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=Tag, Mode=OneWay}"
Width="24"
Height="24"
VerticalAlignment="Center" />
<TextBlock Margin="10 0 0 0"
VerticalAlignment="Center"
Text="{Binding}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
With that style you can the do something like that:
<Grid>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="5 10">
<Button Style="{StaticResource IconStyle}"
Foreground="Crimson"
Content="John Doe"
Tag="{x:Static iconPacks:PackIconModernKind.Home}" />
<Button Style="{StaticResource IconStyle}"
Foreground="ForestGreen"
Content="Works..."
Tag="{x:Static iconPacks:PackIconModernKind.Cloud}" />
</StackPanel>
</Grid>
The namespace for the IconPacks control is xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks".
If you need more icons from another package the simply add the NuGet package and use this control then. It's also possible to use the main IconPacks package which contains all icon controls and a control which can handle all possible icon kind enumerations. You will find more information at the wiki of the repository ion GitHub (MahApps.Metro.IconPacks).

XAML TabControl Border Issues

I am trying to make a custom TabControl that supports scrolling but keeps the original look and feel of the TabControl, obviously with the exception that it scrolls.
To begin I chose to edit a copy of the original template TabControl used.
Then I put a ScrollViewer around the TabPanel. However, this has caused a minor issue where the tabs now have a border at the bottom of them when they are selected. This can be seen below by comparing the normal TabControl and the styled TabControl in the image.
At first I assumed this was the z indexing of the scroll viewer but after trying different values and making sure the z index of the scroll viewer and TabPanel are both explicitly higher than the Border's z index, it made no difference.
How can I achieve the same effect where there is no border at the bottom of the selected tab, whilst it is wrapped in a ScrollViewer?
MainWindow.xaml
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Background="Transparent">
<TabPanel IsItemsHost="true"
Margin="2,2,2,0"
Panel.ZIndex="2"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
Panel.ZIndex="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>
So if we go take a look at a ScrollViewer style template notice there's a Border in there with a set color for it which is the artifact you're seeing.
We could go in and edit a Style template of ScrollViewer and remove that....or for this instance we could just let it keep its Border and override the style inheritance so in your template you could do something like;
<ScrollViewer ...>
<ScrollViewer.Resources>
<Color x:Key="BorderMediumColor">#FFFFFFFF</Color>
</ScrollViewer.Resources>
....
</ScrollViewer>
Wherein it should inherit that new color for the Border in there which in this case I just made white, or you could change the alpha channel too '00' so it's just transparent. Or you could do the previously mentioned and define a new style template without the hardcoded border values.
Hope this helps, cheers!
ADDENDUM : If you can't find the culprit causing the visual border line you can always sort of cheat with the layout of elements within the DOM and utilize margins to overlay the line and achieve the same desired visual result. The line may still technically exist but the illusion that it doesn't can suffice just the same. :)
Working code example
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot"
ClipToBounds="true"
SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local"
UseLayoutRounding="True"> <!-- Gets rid of pixel rounding errors which cause small bugs when window is a certain size -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0, 0, 0, -1.25"
Background="Transparent"> <!-- +- 1.25 seems to be required when mixed with the ZIndex to hide the border underneath the selected tab -->
<TabPanel IsItemsHost="true"
Margin="2,2,2,1.25"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>
You can try this to get custom rounded tabs with blue background
As for scrolling, scrollviewer should do the job
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,1" CornerRadius="4,4,0,0" Margin="2,0" Background="#252e37">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="GhostWhite" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>

Button Style is not applying XAML

So I have been learning WPF for a little while now and I am starting to use styles to make my forms look a little better.
The issue I am running into is for some reason my button style will not be applied anywhere. I am pretty sure I am overwriting the default button style. All of my other styles are working just fine I just can't figure this one out. Here is my code.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Employee_Time_Entry">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colors.xaml" />
<ResourceDictionary Source="Fonts.xaml" />
<ResourceDictionary Source="Texts.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Regular button -->
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Background" Value="{StaticResource BackgroundOrangeBrush}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Padding" Value="50 10" />
<Setter Property="Margin" Value="0 10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border"
CornerRadius="10"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the form code where the button will not apply the style.
<Page x:Class="Employee_Time_Entry.Views.Login"
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"
xmlns:local="clr-namespace:Employee_Time_Entry"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="500"
Title="Login">
<Border>
<Border.Background>
<ImageBrush ImageSource="/Backgrounds/BlueWaveBackground.jpg"/>
</Border.Background>
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" HorizontalAlignment="Center">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.TextAlignment="Center" >
<Border Background="{StaticResource ForegroundLightBrush}"
CornerRadius="10"
Padding="15 10 15 15"
Width="250"
Margin="50 50 50 0">
<StackPanel>
<TextBlock Text="Sign In" Padding="0 0 0 10" FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="0 10 5 0" Text="User Name:" Style="{StaticResource DefaultTextBox}"/>
<TextBlock HorizontalAlignment="Left" Margin="0 15 5 0" Text="Password:" Style="{StaticResource DefaultTextBox}"/>
</StackPanel>
</Grid>
<Grid Grid.Column="1">
<StackPanel>
<TextBox/>
<PasswordBox/>
<Button Content="Login"
Margin = "10 10"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
Here is a picture of my form
You need to make sure the resource file is referenced either application wide or within the page you want to apply it.
To apply the resources from the file to a specific page, you need to add it to the page resources.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Assembly.Namespace;component/MyResourceFileName.xaml"
x:Name="Dict" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
To apply the resource to your entire application, you would do the same but to your app.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Assembly.Namespace;component/MyResourceFileName.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
It should be noted that your button style will not display any content. Your style only has a Border which cannot display content. Make sure you add a ContentPresenter inside of the Button
Bind the style to your button, Like this
<Button Style="{StaticResource /the name of your style here/}" Content="Login" Margin = "10 10"/>
On your button style
<Style TargetType="{x:Type Button}" x:Key="/nameyourstyle/" BasedOn="{StaticResource BaseStyle}">
.....

Buttons in window title bar

I'm trying to implement custom window chrome. I'm using Miscrosoft.Windows.Shell namespace. When I place button on title bar, it's transparent to events. Default button should have light blue background, when I hover mouse over it, but it doesn't have this effect. Another buttons that are not inside title bar fire events properly.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
Title="MainWindow" Height="600" Width="800" Background="#2D2D30" Name="MyWindow"
WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None">
<Window.Style>
<Style TargetType="Window">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome CaptionHeight="25" GlassFrameThickness="0"
CornerRadius="0" ResizeBorderThickness="7"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome CaptionHeight="32" GlassFrameThickness="0"
CornerRadius="0" ResizeBorderThickness="7"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Style>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Margin" Value="7,0,7,7"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=MyWindow, Path=WindowState}" Value="Maximized">
<Setter Property="Margin" Value="7,7,7,7"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel LastChildFill="False" Grid.Row="0" Height="32">
<Button DockPanel.Dock="Right" Width="32" Height="32"/>
</DockPanel>
<Border Background="#1E1E1E" Grid.Row="1">
<Button Width="100" Height="100"/>
</Border>
</Grid>
you should add the attached property "shell:WindowChrome.IsHitTestVisibleInChrome" = true, this should fix your bug.

Categories