Develop Reference

List Tabitems in a dropdownlist wpf

I need to display all the tab headers in a dropdownlist.I have implemented the tab and added the down arrow button to it. I added a popup to list the items along with the button. But i cannot find a way to bind the header of the tab items to the list in the pop (Name = PresetPopup). I have tried binding the itemsource of "ConnectionList". But the ConnectionList is not recogonized in the ConnectionPages.xaml.cs file. Any code how to bind this will be helpful. Or any other way to do this?
<Style TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<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>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Border Height="30" VerticalAlignment="Center" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<materialDesign:PackIcon Kind="ArrowDropDown" VerticalAlignment="Center" Width="15" />
<ToggleButton Name="OpenPopupButton" Background="Transparent" BorderBrush="Transparent" VerticalAlignment="Center">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</ToggleButton.Style>
<materialDesign:PackIcon Background="White" Foreground="Black" Kind="ArrowDropDown" Height="15" VerticalAlignment="Center" Width="15" />
</ToggleButton>
<Popup Name="PresetPopup" IsOpen="{Binding ElementName=OpenPopupButton, Path=IsChecked}" PlacementTarget="{Binding ElementName=OpenPopupButton}" AllowsTransparency="True" PopupAnimation="Slide" StaysOpen="False" >
<ListBox Name="ConnectionList" ItemsSource="{Binding ConnectionsTab}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="a"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
</Grid>
</Border>
</StackPanel>
<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.Triggers>
...........
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Actually my final output requirement is similiar to this
final output

Can Mahapps MetroWindow Template Be Overridden?

I want to create a notification window using Mahapps.Metro. I defined a new Style for MetroWindow but when Show() is executed, application throws a null exception. If i remove the template override, i have no problem... Any ideas?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ctrl="clr-namespace:MyApp.Controls"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
<Style x:Key="ErrorPopup" TargetType="{x:Type Controls:MetroWindow}" BasedOn="{StaticResource {x:Type Controls:MetroWindow}}">
<Setter Property="BorderBrush" Value="{StaticResource ErrorPopupBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="300"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:MetroWindow}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="Red"/>
</Rectangle.Fill>
</Rectangle>
<Button Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Content="X" Padding="0,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Error Title" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<ContentPresenter Grid.Row="2" Grid.Column="1" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
<Controls:MetroWindow x:Class="MyApp.Controls.NotificationPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
Style="{StaticResource ErrorPopup}" ButtonBase.Click="Button_Clicked" Title="Notification Title">
<Controls:MetroWindow.Content>
<TextBlock x:Name="_textContainer" Style="{StaticResource NotificationText}" Text="This is the text to display" TextAlignment="Left" TextWrapping="Wrap"/>
</Controls:MetroWindow.Content>
</Controls:MetroWindow>

Bind Property in Template

I have the following HeaderTemplate for an Expander:
<Expander.HeaderTemplate>
<DataTemplate>
<Grid Background="#939393">
<Grid.RowDefinitions>
<RowDefinition Height="22"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" CornerRadius="5,5,5,5"
Background="Transparent" BorderBrush="#FF000000" Margin="1" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="border" Value="DarkGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<TextBlock Grid.Column="0" Background="#6E6E6E"/>
<ToggleButton Grid.Column="0" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" Focusable="False">
<Image Source="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}, Converter={StaticResource boolToExpanderDirectionConverter}}"/>
</ToggleButton>
<TextBlock Grid.Column="1" Text="General" Margin="5,1,1,1" VerticalAlignment="Top" FontWeight="Bold"/>
</Grid>
</DataTemplate>
</Expander.HeaderTemplate>
This Headertemplate I have defined directly at one Expander. Now I want to move this Template to a Resource and apply it to all Expanders. My problem now is, that I don't know how to set the Header of the TextBlock in the Template to the Header of the Expander.
I knwo there's a way with TemplateBinding, but unfortunately I don't know how to use this.

TemplateBinding can only be used within a ControlTemplate.TemplateBinding is used for binding to the element properties within the template definition..
here in your example you have used controltemplate for toggleButton.
Example For TemplateBinding
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter TextElement.Foreground="{TemplateBinding Foreground}" x:Name="contentPresenter"/>
</Border>
<ControlTemplate.Triggers>
.....
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ToggleButton Grid.Column="0" Background="Red" BorderBrush="Black" BorderThickness="1" Foreground="White"/>
Here Border and Contentpresnter will bind properties of ToggleButton that is alreday defined in its defination.
But in your example you used Datatemplate..so you cant use TemplateBinding ..Please Follow This link for Binding Syntax.
Solution For Your example
Using Binding syntax we can bind Header property to different exapnder
Text="{Binding Path=Header,RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
<Window.Resources>
<DataTemplate x:Key="ExpanderHeaderTemplate">
<Grid Background="#939393">
<Grid.RowDefinitions>
<RowDefinition Height="22"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" CornerRadius="5,5,5,5"
Background="{TemplateBinding Background}" BorderBrush="#FF000000" Margin="1" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="border" Value="DarkGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<TextBlock Grid.Column="0" Background="#6E6E6E"/>
<ToggleButton Grid.Column="0" Background="Red" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" Focusable="False">
<Image Source="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}, Converter={StaticResource boolToExpanderDirectionConverter}}"/>
</ToggleButton>
<TextBlock Grid.Column="1" Text="{Binding Path=Header,RelativeSource={RelativeSource AncestorType={x:Type Expander}}}" Margin="5,1,1,1" VerticalAlignment="Top" FontWeight="Bold"/>
</Grid>
</DataTemplate>
</Window.Resources>
<StackPanel>
<Expander Header="General1" HeaderTemplate="{StaticResource ExpanderHeaderTemplate}"/>
<Expander Header="General2" HeaderTemplate="{StaticResource ExpanderHeaderTemplate}"/>
</StackPanel>

you can have a idea of Template binding by below code i had implemented this when i was learning XAML.
<Button Template="{DynamicResource CircleButton}" Background="Green" Content="1"></Button>
<ControlTemplate x:Key="CircleButton" TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="36" MinWidth="36">
<Ellipse Fill="{TemplateBinding Background}"></Ellipse>
<ContentPresenter TextBlock.FontFamily="Calibri" TextBlock.FontSize="24" TextBlock.Foreground="Wheat" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
you have to give a x:Key to control Template and when you are binding it with some specific element define that x:key there like i did Template="{DynamicResource CircleButton}".
following is your case:
<Style TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
// Do your thing.
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this will apply to all Expander throught your application. You can put this Style into App.xaml file for code cleanness. hope this'll help you.

Since you are specifying a HeaderTemplate via a DataTemplate, the DataContext of the template IS the Header. This simple example works:
<Expander Header="Test">
<Expander.HeaderTemplate>
<TextBlock Text="{Binding}"/>
</Expander.HeaderTemplate>
</Expander>

How to change the background of AreaSeries in WPF

I'm having a strange problem with chartingToolkit:AreaSeries in WPF:
Here's the code I'm using to construct the chart:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
x:Class="leartWPF.ButtonTest"
x:Name="Window"
Title="ButtonTest"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<chartingToolkit:Chart Margin="56,91,50,72" Title="Chart Title" DataContext="{Binding ElementName=Window, Mode=OneWay}">
<chartingToolkit:Chart.Template>
<ControlTemplate TargetType="{x:Type chartingToolkit:Chart}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<Grid>
<chartingprimitives:EdgePanel Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Row="1" Margin="0">
<Grid Panel.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
<Border Panel.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
</chartingprimitives:EdgePanel>
</Grid>
</Border>
</ControlTemplate>
</chartingToolkit:Chart.Template>
<chartingToolkit:LineSeries
ItemsSource="{Binding Path=Data}"
IndependentValuePath="Date"
DependentValuePath="Value"/>
<chartingToolkit:AreaSeries
ItemsSource="{Binding Path=Data}"
IndependentValueBinding="{Binding Date}"
DependentValueBinding="{Binding Value}">
<chartingToolkit:AreaSeries.Background>
<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB5D2ED" Offset="1"/>
<GradientStop Color="#FF1E4C78"/>
</RadialGradientBrush>
</chartingToolkit:AreaSeries.Background>
</chartingToolkit:AreaSeries>
</chartingToolkit:Chart>
</Grid>
</Window>
Both #FFB5D2EDand #FF1E4C78 are blue colors.
Here's what the actual chart looks like:
Why am I getting this, and how do I change the color?

I hope this help you:
<ch:Chart Margin="56,21,50,72" Title="MyChart" DataContext="{Binding ElementName=Window, Mode=OneWay}" >
<ch:Chart.Palette>
<datavis:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Blue"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Green"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Red"/>
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
</ch:Chart.Palette>
<ch:AreaSeries Name="PersonnelArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}"/>
<ch:AreaSeries Name="DefaultArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" />
</ch:Chart>

Restyling AvalonDock for high contrast themes?

I'm using AvalonDock in a project. For the sake of this example, it is structured as follows:
<ad:DockingManager>
<ad:DockablePane>
<ad:DockableContent Title="Test1">
</ad:DockableContent>
<ad:DockableContent Title="Test2">
</ad:DockableContent>
</ad:DockablePane>
</ad:DockingManager>
This is fine, but unfortunately the tabs don't look so good on high contrast themes as shown below.
Ideally I would like to restyle the tabs to use a system color for the background (e.g. Window color). Is this possible?
Thanks,
Alan

go to codeplex and download avalon bits. There you should be able to quickly find their XAML files for styles. Take one as a baseline and start mocking with it.
you should see something like this (I'll include only one style)
<!--DockingManager-->
<Style x:Key="{x:Type ad:DockingManager}" TargetType="{x:Type ad:DockingManager}">
<Setter Property="Background" Value="{StaticResource DockManagerBackground}"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ad:DockingManager}">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Name="PART_LeftAnchorTabPanel"
Grid.Column="0" Grid.Row="1" Orientation="Vertical">
<StackPanel.Resources>
<Style TargetType="{x:Type ad:DockablePaneAnchorTabGroup}">
<Setter Property="LayoutTransform">
<Setter.Value >
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="0,2,2,0"/>
</Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="0,0,3,3"/>
</Style>
</StackPanel.Resources>
</StackPanel>
<StackPanel Name="PART_RightAnchorTabPanel" Grid.Column="2" Grid.Row="1" Orientation="Vertical">
<StackPanel.Resources>
<Style TargetType="{x:Type ad:DockablePaneAnchorTabGroup}">
<Setter Property="LayoutTransform">
<Setter.Value >
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="2,2,0,0"/>
</Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="3,3,0,0"/>
</Style>
</StackPanel.Resources>
</StackPanel>
<StackPanel Name="PART_TopAnchorTabPanel" Grid.Column="1" Grid.Row="0" Orientation="Horizontal"/>
<StackPanel Name="PART_BottomAnchorTabPanel" Grid.Column="1" Grid.Row="2" Orientation="Horizontal"/>
<Border
x:Name="PART_InternalContainer"
Background="{StaticResource DockManagerBorderBackground}"
Grid.Column="1" Grid.Row="1"
Padding="2">
<ContentPresenter />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
note that right on top of the file there will be a bunch of brushes, start with them, then start digging dipper