Would somebody know how to recreate this button style in WPF? As I do not know how to make the different compartments. As well as the 2 different texts and text styles?
To solve your question definitely need to use the Style and Template for the Button. But how exactly does he look like? Decisions may be several. For example, Button are two texts to better define the relevant TextBlocks? Can be directly in the template, but then use the buttons will be limited, because the template can be only one ContentPresenter. I decided to do things differently, to identify one ContentPresenter with an icon in the form of a Path, and the content is set using the buttons on the side.
The style:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Sample of using:
<Button Width="200" Height="50" VerticalAlignment="Top" Margin="0,20,0,0" />
<Button.Content>
<StackPanel>
<TextBlock Text="Watch Now" FontSize="20" />
<TextBlock Text="Duration: 50m" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Button.Content>
</Button>
Output
It is best to StackPanel determine the Resources and set the Button so:
<Window.Resources>
<StackPanel x:Key="MyStackPanel">
<TextBlock Name="MainContent" Text="Watch Now" FontSize="20" />
<TextBlock Name="DurationValue" Text="Duration: 50m" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Window.Resources>
<Button Width="200" Height="50" Content="{StaticResource MyStackPanel}" VerticalAlignment="Top" Margin="0,20,0,0" />
The question remains with setting the value for TextBlock Duration, because this value must be dynamic. I implemented it using attached DependencyProperty. Set it to the window, like that:
<Window Name="MyWindow" local:MyDependencyClass.CurrentDuration="Duration: 50m" ... />
Using in TextBlock:
<TextBlock Name="DurationValue" Text="{Binding ElementName=MyWindow, Path=(local:MyDependencyClass.CurrentDuration)}" FontSize="12" Foreground="Gainsboro" />
In fact, there is no difference for anyone to determine the attached DependencyProperty, because it is the predominant feature.
Example of set value:
private void Button_Click(object sender, RoutedEventArgs e)
{
MyDependencyClass.SetCurrentDuration(MyWindow, "Duration: 101m");
}
A complete listing of examples:
XAML
<Window x:Class="ButtonHelp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ButtonHelp"
Name="MyWindow"
Title="MainWindow" Height="350" Width="525"
WindowStartupLocation="CenterScreen"
local:MyDependencyClass.CurrentDuration="Duration: 50m">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="FontFamily" Value="./#Segoe UI" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel x:Key="MyStackPanel">
<TextBlock Name="MainContent" Text="Watch Now" FontSize="20" />
<TextBlock Name="DurationValue" Text="{Binding ElementName=MyWindow, Path=(local:MyDependencyClass.CurrentDuration)}" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Window.Resources>
<Grid>
<Button Width="200" Height="50" Content="{StaticResource MyStackPanel}" VerticalAlignment="Top" Margin="0,20,0,0" />
<Button Content="Set some duration" Style="{x:Null}" Width="140" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Click="Button_Click" />
</Grid>
Code behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
MyDependencyClass.SetCurrentDuration(MyWindow, "Duration: 101m");
}
}
public class MyDependencyClass : DependencyObject
{
public static readonly DependencyProperty CurrentDurationProperty;
public static void SetCurrentDuration(DependencyObject DepObject, string value)
{
DepObject.SetValue(CurrentDurationProperty, value);
}
public static string GetCurrentDuration(DependencyObject DepObject)
{
return (string)DepObject.GetValue(CurrentDurationProperty);
}
static MyDependencyClass()
{
PropertyMetadata MyPropertyMetadata = new PropertyMetadata("Duration: 0m");
CurrentDurationProperty = DependencyProperty.RegisterAttached("CurrentDuration",
typeof(string),
typeof(MyDependencyClass),
MyPropertyMetadata);
}
}
Here's my attempt. Looks more similar to the OP's sample and provides settable properties for icon (FrameworkElement), title (string) and subtitle (string). The output looks like this:
Here's XAML:
<Button x:Class="Controls.FancyButton"
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:Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Width="300" Height="80"
BorderBrush="{x:Null}" BorderThickness="0">
<Button.Effect>
<DropShadowEffect BlurRadius="12" Color="Gray" Direction="270" Opacity=".8" ShadowDepth="3" />
</Button.Effect>
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Width="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=ActualWidth}"
Height="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=ActualHeight}">
<Border x:Name="MainBorder" CornerRadius="3" Grid.ColumnSpan="2" Margin="0,0,4,4" BorderBrush="Black" BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF5E5E5E" Offset="0" />
<GradientStop Color="#FF040404" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Border CornerRadius="2" Margin="0" BorderBrush="LightGray" BorderThickness="0,1,0,0" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Line X1="10" Y1="0" X2="10" Y2="10" Stretch="Fill" Grid.Column="0" HorizontalAlignment="Right" Stroke="#0C0C0C" Grid.RowSpan="2" />
<Line X1="10" Y1="0" X2="10" Y2="10" Stretch="Fill" Grid.Column="1" HorizontalAlignment="Left" Grid.RowSpan="2">
<Line.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#4D4D4D" Offset="0" />
<GradientStop Color="#2C2C2C" Offset="1" />
</LinearGradientBrush>
</Line.Stroke>
</Line>
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2">
<ContentControl.Content>
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Image">
<Binding.FallbackValue>
<Path Data="M0,0 L30,15 L0,30Z">
<Path.Effect>
<DropShadowEffect Direction="50" ShadowDepth="2" />
</Path.Effect>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#4B86B2" Offset="0" />
<GradientStop Color="#477FA8" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Binding.FallbackValue>
</Binding>
</ContentControl.Content>
</ContentControl>
<Grid Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="Title" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title, FallbackValue='Watch Now'}" Grid.Column="1" VerticalAlignment="Bottom" FontFamily="Calibri" FontWeight="Bold" FontSize="28" Foreground="White" Margin="20,0,0,0" />
<TextBlock x:Name="SubTitle" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SubTitle, FallbackValue='Duration: 50 min'}" Grid.Column="1" Grid.Row="1" VerticalAlignment="top" FontFamily="Calibri" FontSize="14" Foreground="White" Margin="20,0,0,0" />
</Grid>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Title" Property="TextDecorations" Value="Underline" />
<Setter TargetName="SubTitle" Property="TextDecorations" Value="Underline" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MainBorder" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF5E5E5E" Offset="0" />
<GradientStop Color="#FFA4A4A4" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Here's the code-behind:
using System.Windows;
using System.Windows.Controls;
namespace Controls
{
public partial class FancyButton : Button
{
public FancyButton()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(FancyButton), new FrameworkPropertyMetadata("Title", FrameworkPropertyMetadataOptions.AffectsRender));
public string SubTitle
{
get { return (string)GetValue(SubTitleProperty); }
set { SetValue(SubTitleProperty, value); }
}
public static readonly DependencyProperty SubTitleProperty =
DependencyProperty.Register("SubTitle", typeof(string), typeof(FancyButton), new FrameworkPropertyMetadata("SubTitle", FrameworkPropertyMetadataOptions.AffectsRender));
public FrameworkElement Image
{
get { return (FrameworkElement)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(FrameworkElement), typeof(FancyButton), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
}
}
Here is how to use it:
<controls:FancyButton Grid.Row="1" HorizontalAlignment="Right" Margin="3" Title="Watch Now" SubTitle="Duration: 50 min">
<controls:FancyButton.Image>
<Path Data="M0,0 L30,15 L0,30Z">
<Path.Effect>
<DropShadowEffect Direction="50" ShadowDepth="2" />
</Path.Effect>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#4B86B2" Offset="0" />
<GradientStop Color="#477FA8" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</controls:FancyButton.Image>
</controls:FancyButton>
<!--Customize button -->
<LinearGradientBrush x:Key="Buttongradient" StartPoint="0.500023,0.999996" EndPoint="0.500023,4.37507e-006">
<GradientStop Color="#5e5e5e" Offset="1" />
<GradientStop Color="#0b0b0b" Offset="0" />
</LinearGradientBrush>
<Style x:Key="hhh" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{DynamicResource Buttongradient}"/>
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0.5">
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="2"></DropShadowEffect>
</Border.Effect>
<Grid>
<Path Width="9" Height="16.5" Stretch="Fill" Fill="#000" HorizontalAlignment="Left" Margin="16.5,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z " Opacity="0.2">
</Path>
<Path x:Name="PathIcon" Width="8" Height="15" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z ">
<Path.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="5"></DropShadowEffect>
</Path.Effect>
</Path>
<Line HorizontalAlignment="Left" Margin="40,0,0,0" Name="line4" Stroke="Black" VerticalAlignment="Top" Width="2" Y1="0" Y2="640" Opacity="0.5" />
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In this day and age of mouse driven computers and tablets with touch screens etc, it is often forgotten to cater for input via keyboard only. A button should support a focus rectangle (the dotted rectangle when the button has focus) or another shape matching the button shape.
To add a focus rectangle to the button, use this XAML (from this site).
Focus rectangle style:
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Applying the style to the button:
<Style TargetType="Button">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
...
<Button x:Name="mybtnSave" FlowDirection="LeftToRight" HorizontalAlignment="Left" Margin="813,614,0,0" VerticalAlignment="Top" Width="223" Height="53" BorderBrush="#FF2B3830" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontFamily="B Titr" FontSize="15" FontWeight="Bold" BorderThickness="2" TabIndex="107" Click="mybtnSave_Click" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF080505" Offset="1"/>
<GradientStop Color="White" Offset="0.536"/>
</LinearGradientBrush>
</Button.Background>
<Button.Effect>
<DropShadowEffect/>
</Button.Effect>
<StackPanel HorizontalAlignment="Stretch" Cursor="Hand" >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3ED82E" Offset="0"/>
<GradientStop Color="#FF3BF728" Offset="1"/>
<GradientStop Color="#FF212720" Offset="0.52"/>
</LinearGradientBrush>
</StackPanel.Background>
<Image HorizontalAlignment="Left" Source="image/Append Or Save 3.png" Height="36" Width="203" />
<TextBlock HorizontalAlignment="Center" Width="145" Height="22" VerticalAlignment="Top" Margin="0,-31,-35,0" Text="Save Com F12" FontFamily="Tahoma" FontSize="14" Padding="0,4,0,0" Foreground="White" />
</StackPanel>
</Button>
Related
I am new to XAML and Visual Studio and am working on my first project. When try to load my code into Powershell, I get the following error,
"Exception calling "Load" with "1" argument(s): "Cannot create unknown type '{http://schemas.microsoft.com/winfx/2006/xaml/presentation}Null'." To show the form, run the following You cannot call a method on a null-valued expression. At C:\FileLocation.ps1:320 char:1
$Form1.ShowDialog() | out-null
CategoryInfo : InvalidOperation: (:) [], RuntimeException
FullyQualifiedErrorId : InvokeMethodOnNull
If I remove "xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" from my code I get the error,
"Exception calling "Load" with "1" argument(s): "Cannot create unknown type 'Window'."
Below is my entire code:
$inputXML = #"
<Window x:Class="JICXAML.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:local="clr-namespace:JICXAML"
xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
mc:Ignorable="d" Height="740" Width="900" WindowStartupLocation="CenterScreen"
WindowStyle="None" AllowsTransparency="True" Background="Transparent" ResizeMode="CanResizeWithGrip">
<Window.Resources>
<Style x:Key="menuButton" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#707db2" />
<Setter Property="Margin" Value="0 0 0 5"/>
<Setter Property="Height" Value="45"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Tag" Value="#6673b7"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderThickness=" 4 0 0 0" BorderBrush="Transparent">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#bccaf1"/>
<Setter Property="Tag" Value="#E9A422"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
<GradientStop Color="#31407b" Offset="0"/>
<GradientStop Color="#495385" Offset="3"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="menuButtonIcon" TargetType="fa:IconImage">
<Setter Property="Width" Value="23"/>
<Setter Property="Height" Value="23"/>
<Setter Property="Margin" Value="5 0 20 0"/>
<Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Style>
<Style x:Key="menuButtonText" TargetType="TextBlock">
<Setter Property="FontSize" Value="17"/>
<Setter Property="Margin" Value="-25 0 0 0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="{Binding Path=Foreground,RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Style>
<Style x:Key="menuButtonActive" TargetType="Button">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
<GradientStop Color="#31407b" Offset="0"/>
<GradientStop Color="#495385" Offset="3"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#707db2"/>
<Setter Property="Margin" Value="0 0 0 5"/>
<Setter Property="Height" Value="45"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Tag" Value="#7071f0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderThickness=" 4 0 0 0" BorderBrush="#a5a1f5">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="topMenuButton" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#707db2" />
<Setter Property="Margin" Value="-40 10 10 -60"/>
<Setter Property="Height" Value="45"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Tag" Value="#6673b7"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderThickness=" 4 0 0 0" BorderBrush="Transparent">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" Value="#E9A422"/>
<Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Left Menu-->
<Border CornerRadius="10 0 0 10" MouseDown="Border_MouseDown">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,10.5">
<GradientStop Color="#223266" Offset="0"/>
<GradientStop Color="#27396b" Offset=".5"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel>
<!--Logo-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0 35 0 0">
<Border Width="40" Height="40">
<Image Source="C:\Users\Angel\source\repos\JICXAML\jic_logo_final.png" Margin="-75,-34,-57,-141">
</Image>
</Border>
</StackPanel>
<Separator Height="1" Margin="10 111" Background="#46558a"/>
<!--Menu Buttons-->
<Button Style="{StaticResource menuButton}">
<StackPanel Orientation="Horizontal">
<fa:IconImage Icon="Users" Style="{StaticResource menuButtonIcon}" Width="70" Height="30"/>
<TextBlock Text="Find User" Style="{StaticResource menuButtonText}"/>
</StackPanel>
</Button>
<Button Style="{StaticResource menuButton}">
<StackPanel Orientation="Horizontal">
<fa:IconImage Icon="Computer" Style="{StaticResource menuButtonIcon}" Width="70" Height="30"/>
<TextBlock Text="Find Computer" Style="{StaticResource menuButtonText}"/>
</StackPanel>
</Button>
<Button Style="{StaticResource menuButton}">
<StackPanel Orientation="Horizontal">
<fa:IconImage Icon="Print" Style="{StaticResource menuButtonIcon}" Width="70" Height="30"/>
<TextBlock Text="Find Printer" Style="{StaticResource menuButtonText}"/>
</StackPanel>
</Button>
<Button Style="{StaticResource menuButton}">
<StackPanel Orientation="Horizontal">
<fa:IconImage Icon="CompactDisc" Style="{StaticResource menuButtonIcon}" Width="70" Height="30"/>
<TextBlock Text="Install Apps" Style="{StaticResource menuButtonText}"/>
</StackPanel>
</Button>
<Button Style="{StaticResource menuButton}">
<StackPanel Orientation="Horizontal">
<fa:IconImage Icon="Columns" Style="{StaticResource menuButtonIcon}" Width="70" Height="30"/>
<TextBlock Text="Legacy Panels" Style="{StaticResource menuButtonText}"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
<!--Main Section-->
<Border Grid.Column="1" CornerRadius="0 10 10 0" MouseDown="Border_MouseDown">
<Border.Background>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="#223266" Offset="1"/>
<GradientStop Color="#41518f" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<!--Top Menu-->
<Grid.RowDefinitions>
<RowDefinition Height="35" MinHeight="20" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" CornerRadius="0 0 10 0" MouseDown="Border_MouseDown">
<Border.Background>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="#41518f" Offset="0"/>
<GradientStop Color="#2c386c" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0 0,0,0" Height="60" Width="203">
<Button Style="{StaticResource topMenuButton}">
<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
<fa:IconImage Icon="WindowMinimize" Style="{StaticResource menuButtonIcon}" Width="20" Height="30" Margin="40,-50,0,15"/>
</StackPanel>
</Button>
<Button Style="{StaticResource topMenuButton}">
<StackPanel Orientation="Horizontal">
<fa:IconImage Icon="WindowRestore" Style="{StaticResource menuButtonIcon}" Width="20" Height="30" Margin="60,-50,5,15"/>
</StackPanel>
</Button>
<Button Style="{StaticResource topMenuButton}">
<StackPanel Orientation="Horizontal">
<fa:IconImage Icon="WindowClose" Style="{StaticResource menuButtonIcon}" Width="20" Height="30" Margin="60,-50,20,15"/>
</StackPanel>
</Button>
<Menu Margin="0,0,0,697">
<MenuItem Header="File">
<MenuItem Header="Exit"/>
</MenuItem>
</Menu>
</StackPanel>
</Grid>
</Border>
</Grid>
</Window>
"#
$inputXML = $inputXML -replace 'mc:Ignorable="d"','' -replace "x:N",'N' -replace '^<Win.*', '<Window'
[void][System.Reflection.Assembly]::LoadWithPartialName('presentationframework')
[xml]$XAML = $inputXML
#Read XAML
$reader=(New-Object System.Xml.XmlNodeReader $xaml)
try{$Form1=[Windows.Markup.XamlReader]::Load( $reader )}
catch [System.Management.Automation.MethodInvocationException] {
Write-Warning "We ran into a problem with the XAML code. Check the syntax for this control..."
write-host $error[0].Exception.Message -ForegroundColor Red
If ($error[0].Exception.Message -like "*button*") {
write-warning "Ensure your <button in the `$inputXML does NOT have a Click=ButtonClick property. PS can't handle this`n`n`n`n"
}
}
catch{# If it broke some other way <img draggable="false" role="img" class="emoji" alt="😀" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f600.svg">
Write-Host "Unable to load Windows.Markup.XamlReader. Double-check syntax and ensure .net is installed."
}
#===========================================================================
#Store Form Objects In PowerShell
#===========================================================================
$xaml.SelectNodes("//*[#Name]") | %{Set-Variable -Name "WPF$($_.Name)" -Value $Form.FindName($_.Name)}
Function Get-FormVariables{
If ($global:ReadmeDisplay -ne $true){Write-host "If you need to reference this display again, run Get-FormVariables" -ForegroundColor Yellow;$global:ReadmeDisplay=$true}
write-host "Found the following interactable elements from our form" -ForegroundColor Cyan
get-variable WPF*
}
#===========================================================================
# Shows the form
#===========================================================================
write-host "To show the form, run the following" -ForegroundColor Cyan
$Form1.ShowDialog() | out-null
Alternatively, if anyone knows how to run powershell commandlets in XAML, that would be great too. Thanks for any help that anyone can provide.
In the line :
$inputXML = $inputXML -replace 'mc:Ignorable="d"','' -replace "x:N",'N' -replace '^<Win.*', '<Window'
You have to replace
-replace "x:N",'N'
by
-replace "x:Name",'Name'
That way it will not convert the {x:Null} in your XAML.
How can I achieve to have a TabControl where my tabs are scrollable in a ScrollViewer, but without having the "bar" of the scrollviewer, and the navigation buttons surrounding the tabs. Like an internet browser does
I added the tabs in scrollviewer as shown below, but I don't know if it is achievable to customize the scrollviewer to my needs.
<ScrollViewer
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
Grid.Row="0" Grid.Column="1">
<TabPanel
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Margin="2,2,2,0"
IsItemsHost="true"/>
You can try this or the code below.
The code is not mine, I just copied it from here, but i think that's the code you are looking for.
<TabControl x:Name="myTab" >
<TabControl.Resources>
<LinearGradientBrush x:Key="TabItemDefaultBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="#FFF" />
<GradientStop Offset="1.0" Color="#EEE" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="TabItemSelectBackgroundBrush" Color="#AAA" />
<SolidColorBrush x:Key="TabItemMouseoverBrush" Color="#BBB" />
<SolidColorBrush x:Key="CloseButtenBackgroundBrush" Color="#169" />
<SolidColorBrush x:Key="CloseButtenMouseoverBrush" Color="#E5E" />
<SolidColorBrush x:Key="CloseButtenPressBrush" Color="#E0E" />
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="tabBorder"
MinWidth="100"
MinHeight="30"
Margin="0,0,20,0"
Background="{StaticResource TabItemDefaultBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="3,15,0,0">
<Grid>
<Button
x:Name="tabButton"
Width="15"
Height="15"
Margin="90,10,0,0"
Click="tabButton_Click"
Visibility="Hidden">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.Background>
<VisualBrush Viewbox="0,0,1024,1024" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Path
x:Name="mypath"
Data="M509.953388 63.243393c-246.709915 0-446.708971 200.00008-446.708971 446.708971 0 246.711961 200.00008 446.708971 446.708971 446.708971 246.711961 0 446.708971-199.998033 446.708971-446.708971C956.662359 263.243473 756.664326 63.243393 509.953388 63.243393zM735.3683 670.450778c17.933441 17.933441 17.933441 46.984081 0 64.917522-8.965186 8.965186-20.712741 13.44829-32.456203 13.44829-11.746532 0-23.493064-4.483104-32.459273-13.44829L509.953388 574.868863 349.455997 735.3683c-8.968256 8.965186-20.712741 13.44829-32.459273 13.44829s-23.493064-4.483104-32.459273-13.44829c-17.933441-17.933441-17.933441-46.984081 0-64.917522l160.499437-160.497391L284.537452 349.452927c-17.933441-17.933441-17.933441-46.984081 0-64.917522 17.933441-17.931395 46.984081-17.931395 64.917522 0l160.497391 160.499437 160.499437-160.499437c17.931395-17.931395 46.984081-17.931395 64.915475 0 17.933441 17.933441 17.933441 46.984081 0 64.917522L574.87091 509.953388 735.3683 670.450778z"
Fill="{StaticResource CloseButtenBackgroundBrush}" />
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="mypath" Property="Fill" Value="{StaticResource CloseButtenMouseoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="mypath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<ContentPresenter
x:Name="ContentSite"
Margin="12,2,12,2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tabBorder" Property="Background" Value="{StaticResource TabItemSelectBackgroundBrush}" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="tabButton" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="tabBorder" Property="Background" Value="{StaticResource TabItemMouseoverBrush}" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="tabButton" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrolltoLeft" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
x:Name="border"
Background="Transparent"
BorderBrush="Gray"
BorderThickness="0"
CornerRadius="0"
TextBlock.Foreground="White">
<Grid>
<Viewbox Margin="-5,-2,0,0">
<Path
x:Name="BPath"
Data="M269.6 535.8l462.9 319.3c30.6 21.1 72.3-0.8 72.3-38V177.5c0-34.1-38.2-54.2-66.3-34.8L269.6 466.2c-24.3 16.8-24.3 52.8 0 69.6z"
Fill="Gray" />
</Viewbox>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrolltoRight" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
x:Name="border"
Background="Transparent"
BorderBrush="Gray"
BorderThickness="0"
CornerRadius="0"
TextBlock.Foreground="White">
<Grid>
<Viewbox Margin="-5,-2,0,0">
<Path
x:Name="BPath"
Data="M767.6 547.8L304.7 867.1c-30.6 21.1-72.3-0.8-72.3-38V189.5c0-34.1 38.2-54.2 66.3-34.8l468.9 323.5c24.3 16.8 24.3 52.8 0 69.6z"
Fill="Gray" />
</Viewbox>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<RepeatButton
x:Name="ScrolltoLeft_Btn"
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Top"
Command="{x:Static ScrollBar.LineLeftCommand}"
CommandTarget="{Binding ElementName=sv}"
Style="{StaticResource ScrolltoLeft}" />
<ScrollViewer
x:Name="sv"
Grid.Row="0"
Grid.Column="1"
HorizontalScrollBarVisibility="Hidden"
PreviewMouseWheel="ScrollViewer_PreviewMouseWheel"
VerticalScrollBarVisibility="Disabled">
<TabPanel
x:Name="HeaderPanel"
Panel.ZIndex="1"
IsItemsHost="true"
KeyboardNavigation.TabIndex="1" />
</ScrollViewer>
<ContentPresenter
x:Name="PART_SelectedContentHost"
Grid.Row="1"
Grid.ColumnSpan="2"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
ContentSource="SelectedContent"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<RepeatButton
x:Name="ScrolltoRight_Btn"
Grid.Row="0"
Grid.Column="2"
VerticalAlignment="Top"
Command="{x:Static ScrollBar.LineRightCommand}"
CommandTarget="{Binding ElementName=sv}"
Style="{StaticResource ScrolltoRight}" />
</Grid>
</ControlTemplate>
</TabControl.Template>
<TabItem Background="AliceBlue" Header="test1" >
<Label Content="test1 Content goes here..." />
</TabItem>
<TabItem Background="AliceBlue" Header="test2" >
<Label Content="test2 Content goes here..." />
</TabItem>
<TabItem Background="AliceBlue" Header="test3" >
<Label Content="test3 Content goes here..." />
</TabItem>
<TabItem Header="test4" />
<TabItem Header="test5" />
<TabItem Header="test6" />
<TabItem Header="test7" />
<TabItem Header="test8" />
<TabItem Header="test9" />
<TabItem Header="test10" />
<TabItem Header="test11" />
<TabItem Header="test12" />
<TabItem Header="test13" />
<TabItem Header="test14" />
private void tabButton_Click(object sender, RoutedEventArgs e)
{
Button b = sender as Button;
TabItem item = FindParent<TabItem>(b);
myTab.Items.Remove(item);
}
public T FindParent<T>(DependencyObject child) where T : DependencyObject
{
//get parent item
DependencyObject parentObject = VisualTreeHelper.GetParent(child);
//we've reached the end of the tree
if (parentObject == null) return null;
//check if the parent matches the type we're looking for
T parent = parentObject as T;
if (parent != null)
return parent;
else
return FindParent<T>(parentObject);
}
private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
ScrollViewer scrollviewer = sender as ScrollViewer;
if (e.Delta > 0)
scrollviewer.LineLeft();
else
scrollviewer.LineRight();
e.Handled = true;
}
I've been trying so hard to find an external package to make my WPF Apps in VS 2010 Express Edition look like Metro UI but this version does not support it, so I found this thread: Making WPF applications look Metro-styled, even in Windows 7? (Window Chrome / Theming / Theme) in which the user creates an own Theme. I have tried to adapt his code to my App (namespace WpfApplication1 and window MainWindow, as it is set by default) but I get an error at this part:
<Style x:Key="MainWindowStyle" TargetType="WpfApplication1:MainWindow">
Where it says that WpfApplication1 is an undeclared namespace.
I don't know why this happens since the namespace has the following shape:
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
And this is the whole code from this other guy adapted to my workspace:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="350">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" />
<Color x:Key="WindowBackgroundColor">#FF2D2D30</Color>
<Color x:Key="HighlightColor">#FF3F3F41</Color>
<Color x:Key="BlueColor">#FF007ACC</Color>
<Color x:Key="ForegroundColor">#FFF4F4F5</Color>
<SolidColorBrush x:Key="WindowBackgroundColorBrush" Color="{StaticResource WindowBackgroundColor}"/>
<SolidColorBrush x:Key="HighlightColorBrush" Color="{StaticResource HighlightColor}"/>
<SolidColorBrush x:Key="BlueColorBrush" Color="{StaticResource BlueColor}"/>
<SolidColorBrush x:Key="ForegroundColorBrush" Color="{StaticResource ForegroundColor}"/>
<Style x:Key="WindowButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource HighlightColorBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource BlueColorBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="contentPresenter" Property="Opacity" Value=".5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MainWindowStyle" TargetType="WpfApplication1:MainWindow">
<Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}" />
<Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="WpfApplication1:MainWindow">
<Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}" Background="{StaticResource WindowBackgroundColorBrush}">
<Grid>
<Border BorderThickness="1">
<AdornerDecorator>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1" Grid.RowSpan="2" Margin="7"/>
<Rectangle x:Name="HeaderBackground" Height="25" Fill="{DynamicResource WindowBackgroundColorBrush}" VerticalAlignment="Top" Grid.Row="0"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Row="0">
<Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="minimize" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
<Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2" />
</Grid>
</Button.Content>
</Button>
<Grid Margin="1,0,1,0">
<Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="restore" Visibility="Collapsed" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="30" Height="25" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
<Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1" />
</Grid>
</Button.Content>
</Button>
<Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="maximize" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="31" Height="25">
<Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2" />
</Grid>
</Button.Content>
</Button>
</Grid>
<Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="close" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
<Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5" />
</Grid>
</Button.Content>
</Button>
</StackPanel>
<TextBlock x:Name="WindowTitleTextBlock" Grid.Row="0" Text="{TemplateBinding Title}" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" Margin="8 -1 0 0" FontSize="16" Foreground="{TemplateBinding Foreground}"/>
<Grid Grid.Row="2">
<Path x:Name="ResizeGrip" Visibility="Collapsed" Width="12" Height="12" Margin="1" HorizontalAlignment="Right"
Stroke="{StaticResource BlueColorBrush}" StrokeThickness="1" Stretch="None" Data="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3" />
</Grid>
</Grid>
</AdornerDecorator>
</Border>
<Border BorderBrush="{StaticResource BlueColorBrush}" BorderThickness="1" Visibility="{Binding IsActive, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource bool2VisibilityConverter}}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Restore" Property="Visibility" Value="Visible" />
<Setter TargetName="LayoutRoot" Property="Margin" Value="7" />
</Trigger>
<Trigger Property="WindowState" Value="Normal">
<Setter TargetName="Maximize" Property="Visibility" Value="Visible" />
<Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip" />
<Condition Property="WindowState" Value="Normal" />
</MultiTrigger.Conditions>
<Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Any ideas where it might be failing? Thanks!
When it says the namespace is not declared, it means that is not declared inside XAML. To declare it in XAML you use xmlns:, append the short name and then define the actual namespace, something like this:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WpfApplication1="clr-namespace:WpfApplication1"
Title="MainWindow" Height="150" Width="350"
>
You can look at above, there are 3 declared namespaces, I added the one you missed and should fix your problem.
Of course you should use some short name instead.
Further reading: XAML namespaces and namespace mapping.
I am working on slider control of wpf, i want background design of slider control filled according to my attached image, please help me how i can fill the background with same gradient in wpf ?
<UserControl.Resources>
<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Height="10">
<Border.Background>
<ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="Green" Height="10"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="20" Width="20">
<Ellipse.Fill>
<ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="Horizontal_Slider" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center" Value="500" Width="300" Margin="50,0,50,0"></Slider>
You have to include RelativeTransform to get striped background in lineargradient brush.Please try below code for Background brush
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" SpreadMethod="Repeat">
<GradientStop Color="#FF00AEEF" Offset="0"/>
<GradientStop Color="#FF00AEEF" Offset="0.5"/>
<GradientStop Color="#FF8BD6F0" Offset="0.5"/>
<GradientStop Color="#FF8BD6F0" Offset="1"/>
<LinearGradientBrush.RelativeTransform>
<ScaleTransform ScaleX="0.075" ScaleY="0.010"/>
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
I have a ContextMenu defined in XAML as follows:
<ContextMenu x:Name="deleteContextMenu">
<ContextMenu.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</ContextMenu.BitmapEffect>
<MenuItem Header="Delete" Click="DeleteMenuItem_Click" Name="DeleteMenuItem" Background="{StaticResource ContextMenuBrush}">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem2" Background="{StaticResource ContextMenuBrush}">
</MenuItem>
</MenuItem>
</ContextMenu>
My custom DropShadow is applied to the main ContextMenu pop-up, but when I click the MenuItem, the submenu pop-up still has the horrible default shadow that looks terribly out of place with my color scheme. How can I force all submenus to have the same custom DropShadow effect?
UPDATE:
if I hack the visual tree for a MenuItem on the main context menu pop-up thusly:
StackPanel menuStackPanel = VisualTreeHelper.GetParent(menuItem as DependencyObject) as StackPanel;
Border border = VisualTreeHelper.GetParent(menuStackPanel) as Border;
border.Background = Brushes.Red;
I can control the color of the main pop-up.
For a subMenuItem in the submenu pop-up, there is no parent of any type returned by the visual tree helper.
I have a hacky suggestion:
<ContextMenu x:Name="deleteContextMenu">
<ContextMenu.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</ContextMenu.BitmapEffect>
<ContextMenu.Resources>
<Style TargetType="{x:Type PopupRoot}">
<Setter Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</Setter.Value>
</Setter>
</Style>
</ContextMenu.Resources>
<MenuItem Header="Delete" Name="DeleteMenuItem" Background="White" UsesItemContainerTemplate="True">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem2" Background="White" UsesItemContainerTemplate="True">
</MenuItem>
</MenuItem>
</ContextMenu>
The child items of a MenuItem are displayed in a Popup (can be seen in MenuItem ControlTemplate Example. Thanks to this and snoop the style <Style TargetType="{x:Type PopupRoot}"> should apply the shadow to the child items.
Plan B:
You'll need to add the PresentationFramework.Classic (or another Aero etc.) assembly to the project.
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic
<ControlTemplate TargetType="MenuItem" x:Key="miTest">
<Grid SnapsToDevicePixels="True">
<Rectangle RadiusX="2" RadiusY="2" Fill="{TemplateBinding Panel.Background}" Stroke="{TemplateBinding Border.BorderBrush}" StrokeThickness="1" Name="Bg" />
<Rectangle RadiusX="2" RadiusY="2" Stroke="#00FFFFFF" StrokeThickness="1" Name="InnerBorder" Margin="1,1,1,1" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="37" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" />
<ColumnDefinition Width="17" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding MenuItem.Icon}" ContentSource="Icon" Name="Icon" Margin="1,1,1,1" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
<Border BorderThickness="1,1,1,1" CornerRadius="3,3,3,3" BorderBrush="#FFCDD3E6" Background="#FFE6EFF4" Name="GlyphPanel" Width="22" Height="22" Margin="1,1,1,1" Visibility="Hidden">
<Path Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="#FF0C12A1" Name="Glyph" Width="9" Height="11" FlowDirection="LeftToRight" />
</Border>
<ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Grid.Column="2" />
<TextBlock Text="{TemplateBinding MenuItem.InputGestureText}" Margin="{TemplateBinding Control.Padding}" Visibility="Collapsed" Grid.Column="4" />
<Path Data="M0,0L4,3.5 0,7z" Fill="{TemplateBinding TextElement.Foreground}" Margin="4,0,0,0" VerticalAlignment="Center" Grid.Column="5" />
</Grid>
<Popup IsOpen="{TemplateBinding IsSubmenuOpen}" Placement="Right" HorizontalOffset="-2" VerticalOffset="-3" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" AllowsTransparency="True" Name="PART_Popup" Focusable="False">
<mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw">
<mwt:SystemDropShadowChrome.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</mwt:SystemDropShadowChrome.BitmapEffect>
<Border BorderThickness="1,1,1,1" BorderBrush="#FF959595" Background="#FFF5F5F5" Name="SubMenuBorder">
<ScrollViewer Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=FrameworkElement, ResourceId=MenuScrollViewer}}" Name="SubMenuScrollViewer" Margin="1,0,1,0">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Fill="#FFF5F5F5" Name="OpaqueRect" Width="Auto" Height="Auto" />
</Canvas>
<Rectangle RadiusX="2" RadiusY="2" Fill="#FFF1F1F1" Width="28" Margin="1,2,1,2" HorizontalAlignment="Left" />
<Rectangle Fill="#FFE2E3E3" Width="1" Margin="29,2,0,2" HorizontalAlignment="Left" />
<Rectangle Fill="#FFFFFFFF" Width="1" Margin="30,2,0,2" HorizontalAlignment="Left" />
<ItemsPresenter Name="ItemsPresenter" Margin="2,2,2,2" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" />
</Grid>
</ScrollViewer>
</Border>
</mwt:SystemDropShadowChrome>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="MenuItem.IsSuspendingPopupAnimation" Value="True">
<Setter Property="Popup.PopupAnimation" TargetName="PART_Popup" Value="None" />
</Trigger>
<Trigger Property="MenuItem.IsHighlighted" Value="True">
<Setter Property="Shape.Stroke" TargetName="InnerBorder" Value="#D1DBF4FF" />
</Trigger>
<Trigger Property="MenuItem.Icon" Value="{x:Null}">
<Setter Property="UIElement.Visibility" TargetName="Icon" Value="Collapsed" />
</Trigger>
<Trigger Property="MenuItem.IsChecked" Value="True">
<Setter Property="UIElement.Visibility" TargetName="GlyphPanel" Value="Visible" />
<Setter Property="UIElement.Visibility" TargetName="Icon" Value="Collapsed" />
</Trigger>
<Trigger Property="Popup.HasDropShadow" SourceName="PART_Popup" Value="True">
<Setter Property="FrameworkElement.Margin" TargetName="Shdw" Value="0,0,5,5" />
<Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw" Value="#71000000" />
</Trigger>
<Trigger Property="MenuItem.IsHighlighted" Value="True">
<Setter Property="Shape.Fill" TargetName="Bg">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#34C5EBFF" Offset="0" />
<GradientStop Color="#3481D8FF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Stroke" TargetName="Bg" Value="#8571CBF1" />
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="#FF9A9A9A" />
<Setter Property="Panel.Background" TargetName="GlyphPanel" Value="#FFEEE9E9" />
<Setter Property="Border.BorderBrush" TargetName="GlyphPanel" Value="#FFDBD6D6" />
<Setter Property="Shape.Fill" TargetName="Glyph" Value="#FF848589" />
</Trigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding Path=VerticalOffset, ElementName=SubMenuScrollViewer}" />
<Setter Property="Canvas.Left" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="HorizontalOffset" ElementName="SubMenuScrollViewer" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Usage:
<ContextMenu x:Name="deleteContextMenu">
<ContextMenu.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</ContextMenu.BitmapEffect>
<MenuItem Header="Delete" Name="DeleteMenuItem" Background="White" Template="{StaticResource miTest}">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem2" Background="White" Template="{StaticResource miTest}">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem3" Background="White" Template="{StaticResource miTest}">
</MenuItem>
</MenuItem>
</MenuItem>
</ContextMenu>
You need to set the Style for the Submenu. Here is a MSDN example. Obviously, just take the code that you need.
http://msdn.microsoft.com/en-us/library/ms744758%28v=vs.85%29.aspx