I've written the following style
<Window x:Class="Wpf_ViewModelbased1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=MainVm}"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<!--Datepicker-->
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border BorderBrush="Black" BorderThickness="1">
<Grid x:Name="PART_Root" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<DatePickerTextBox x:Name="PART_TextBox" HorizontalContentAlignment="Center" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Center" IsReadOnly="True" Grid.Row="1"/>
<Button x:Name="PART_Button" Grid.Row="0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image x:Name="buttonImage" Height="35" Width="35" HorizontalAlignment="center" Source="C:\Users\00027887\Documents\Visual Studio 2015\Projects\RelWA\RelWA\Resources\datepickerincon.png"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Popup x:Name="PART_Popup" StaysOpen="False" AllowsTransparency="True">
<CalendarItem x:Name="PART_CalendarItem">
<CalendarItem.Style>
<Style TargetType="{x:Type CalendarItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarItem}">
<Calendar SelectedDate="{x:Static sys:DateTime.Today}">
<Calendar.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Turquoise" Offset="0.7"/>
<GradientStop Color="White"/>
<GradientStop Color="green" Offset="1"/>
</LinearGradientBrush>
</Calendar.Background>
</Calendar>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CalendarItem.Style>
</CalendarItem>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<DatePicker Width="100" Height="75"/>
</Grid>
</Window>
In desinger window everything looks like expected:
But when i debug the application:
I don't have a clue why.
When a DatePicker is visualized, its OnApplyTemplate method is called. If you spy that method you will find this piece of code:
this._popUp = (base.GetTemplateChild("PART_Popup") as Popup);
if (this._popUp != null)
{
this._popUp.AddHandler(UIElement.PreviewMouseLeftButtonDownEvent, new MouseButtonEventHandler(this.PopUp_PreviewMouseLeftButtonDown));
this._popUp.Opened += new EventHandler(this.PopUp_Opened);
this._popUp.Closed += new EventHandler(this.PopUp_Closed);
this._popUp.Child = this._calendar;
if (this.IsDropDownOpen)
{
this._popUp.IsOpen = true;
}
}
As you can see, the Child property of your "PART_Popup" is always overwritten with a calendar control which is a private field of the DatePicker itself. So it is unuseful to specify a child for the Popup in your ControlTemplate. Just leave it empty, i.e. with no child.
For setting a calender style, instead, just use the CalendarStyle property:
<DatePicker Width="100" Height="75">
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Turquoise" Offset="0.7"/>
<GradientStop Color="White"/>
<GradientStop Color="green" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
I hope it can help you with your issue.
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.
I've been developing some simple apps (just for educational purposes) with Windows Forms and now I'm starting to learn WPF, but it seems a bit more complex to me.
I would like to create a simple menu like the one you can see in the pictures. I've been trying to find it on Google and YouTube, but I only found tutorials about "Hamburger menu", which isn't what I'm looking for.
This is really an area where WPF shines: the layout you describe can be implemented with nothing more than a restyled tab control.
Start with an unstyled tab control with TabStripPlacement of Left:
Then edit the TabControl style to add gradient and margins behind the TabPanel:
Add the image and override the TabItem style to set the font and remove the background. I used a chevron to indicate selection rather than bolding the text, but that would have been handled the same way.
Here is the full XAML used for the screenshots above:
<Window x:Class="StackOverflowTabControl.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:StackOverflowTabControl"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<Style x:Key="ItemContainerStyle" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Margin="15,5">
<Path Width="10" Height="14" Margin="0,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Stretch="Fill" Fill="#FF000000" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z " Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter Content="{TemplateBinding Header}" Margin="20,5,10,5">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Light" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="TabStripPlacement" Value="Left" />
<Setter Property="ItemContainerStyle" Value="{StaticResource ItemContainerStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Padding="5">
<Border.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
<GradientStop Color="#FFC7C7C7" Offset="0"/>
<GradientStop Color="#FFECECEC" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<DockPanel>
<Image DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="20" Source="pack://application:,,,/StackOverflowTabControl;component/twc.png" Width="200" />
<TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
</DockPanel>
</Border>
<Border x:Name="contentPanel" Grid.Column="1" Margin="5,0,0,0">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Style="{DynamicResource TabControlStyle1}">
<TabItem Header="System Information">
<TextBlock Text="Windows 10 pro" />
</TabItem>
<TabItem Header="Something else">
<TextBlock Text="Other page" />
</TabItem>
</TabControl>
</Grid>
</Window>
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'm using the WPF Tookit (http://wpf.codeplex.com/) and am using the chart controls to make a column chart using ColumnSeries. I'm trying to override the default ColumnDataPoint style however when ever I run the application the columns no longer render and I see a "System.NotSupportedException" and "System.Xaml.XamlObjectWriterException" in the debug output log. Am I doing something wrong or is the issue with the outdated WPF Toolkit? Thanks.
Includes:
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
The Chart:
<chartingToolkit:Chart Name="columnChart" Title="Results" >
<chartingToolkit:ColumnSeries DataPointStyle="{DynamicResource ModernColumnStyle}" DependentValuePath="Count" IndependentValuePath="Method" ItemsSource="{Binding Results}" />
</chartingToolkit:Chart>
Resource with Style:
Only change I made from the original source was that I removed the VisualStateManager stuff
<Grid.Resources>
<Style TargetType="chartingToolkit:ColumnDataPoint" x:Key="ModernColumnStyle" BasedOn="{StaticResource {x:Type chartingToolkit:ColumnDataPoint}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:ColumnDataPoint">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" x:Name="Root">
<Grid Background="{TemplateBinding Background}">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#77ffffff" Offset="0" />
<GradientStop Color="#00ffffff" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="#ccffffff" BorderThickness="1">
<Border BorderBrush="#77ffffff" BorderThickness="1" />
</Border>
</Grid>
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
Maybe you should change "DynamicResource" to "StaticResource" like this:
<chartingToolkit:ColumnSeries DataPointStyle="{StaticResource ModernColumnStyle}" DependentValuePath="Count" IndependentValuePath="Method" ItemsSource="{Binding Results}" />
I'm trying to customize the column headers of a DataGrid to show sub-column headers as in the following screenshot:
I've made a style for 2 sub-columns as in the following XAML:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
xmlns:sl="clr-namespace:UI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="UI.ColumnHeaderGrid"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="SplitColumnHeaderStyle" TargetType="primitives:DataGridColumnHeader">
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:DataGridColumnHeader">
<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
<Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FCFFFFFF" Offset="0.015"/>
<GradientStop Color="#F7FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.6"/>
<GradientStop Color="#D1FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="1"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="3" Text="Headers" TextAlignment="Center"/>
<Rectangle Grid.Row="1" Grid.ColumnSpan="3" Fill="{TemplateBinding SeparatorBrush}" Height="1"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Header 1" TextAlignment="Center"/>
<Rectangle Grid.Row="2" Grid.Column="1" Fill="{TemplateBinding SeparatorBrush}" Width="1"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="Header 2" TextAlignment="Center"/>
<Path x:Name="SortIcon" Grid.Column="2" Fill="#FF444444" Stretch="Uniform" HorizontalAlignment="Left" Margin="4,0,0,0" VerticalAlignment="Center" Width="8" Opacity="0" RenderTransformOrigin=".5,.5" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z "/>
</Grid>
<Rectangle x:Name="VerticalSeparator" Fill="{TemplateBinding SeparatorBrush}" VerticalAlignment="Stretch" Width="1" Visibility="{TemplateBinding SeparatorVisibility}" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<data:DataGrid x:Name="LayoutRoot">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn HeaderStyle="{StaticResource SplitColumnHeaderStyle}">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="#FFC9CACA" BorderThickness="0,0,0,0">
<TextBlock Grid.Column="0" Text="{Binding GridData.Column1}"/>
</Border>
<Border Grid.Column="1" BorderBrush="#FFC9CACA" BorderThickness="1,0,0,0">
<TextBlock Grid.Column="0" Text="{Binding GridData.Column2}"/>
</Border>
</Grid>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
Now I want to reuse & extend this style to support 2->6 sub-column headers but I don't know if there is a way to do this, like ContentPresenter "overriding":
<Style x:Key="SplitColumnHeaderStyle" TargetType="primitives:DataGridColumnHeader">
<Setter property="Template">
<Setter.Value>
...
<ContentPresenter Content="{TemplateBinding Content}".../>
...
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TwoSubColumnHeaderStyle" BasedOn="SplitColumnHeaderStyle">
<Setter property="Content">
<Setter.Value>
<Grid 2x2.../>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ThreeSubColumnHeaderStyle" BasedOn="SplitColumnHeaderStyle">
<Setter property="Content">
<Setter.Value>
<Grid 2x3.../>
</Setter.Value>
</Setter>
</Style>
Anyway, please help me on these issues:
Given the templates above, how to support more sub-column headers without having to create new template for each?
Assuming that the issue above is solved. How could I attach column names outside the styles?
I see that some parts, properties & visualization rules in the XAML are just copies from the original Silverlight component's style, i.e. BackgroundGradient, BackgroundRectangle, VisualStateManager... They must be there in order to support default behaviors or effects but... does anyone know how to remove them, but keep all the default behaviors/effects?
Please be specific because I'm just getting started with C# & Silverlight.
Here is a good example:
http://weblogs.asp.net/dwahlin/archive/2009/06/11/customizing-silverlight-3-datagrid-headers.aspx