I've got a TabControl with several TabItems. I'm trying to make them have a flatter design. The idea is to have the outside border of the tab go away, with the active tab indicated by a green line at the bottom of the tab. I've been able to get the green line to work perfectly, but no matter what I do I can't get rid of the left, top, and right lines of each TabItem.
Due to text formatting constraints in my specs, I have wrapped the TabItem header into a TextBlock wrapped by a Border. I suspect this combination may have something to do with it. If there is a way to show the green bottom border on the active tab, while allowing line breaks (each tab has two words that need to be split into two lines) and text centering in the tab header, I am totally fine with changing my configuration. I've tried various combinations of the BorderThickness, Margin, and Padding properties to no avail.
<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl">
<TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White">
<TabItem.Header>
<Border Style="{StaticResource TabItemText}">
<TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap"></TextBlock>
</Border>
</TabItem.Header>
</TabItem>
</TabControl>
This is the tab coloring code. It does some redundant things at the moment, but it illustrates what I'm trying to do.
<Style x:Key="TabItemText" TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="BorderBrush" Value="#57B481"/>
<Setter Property="BorderThickness" Value="0 0 0 4"/>
<Setter Property="Margin" Value="0 0 0 -3"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="BorderThickness" Value="0 0 0 0"/>
<Setter Property="Margin" Value="0 0 0 -3"/>
</DataTrigger>
</Style.Triggers>
</Style>
You can/should change the Template of TabItem. It contains a Border and you should fix its BorderThicknessto something like "0,0,0,2". The Last Value determines the height of the green border you are trying to create. You should also set the BorderBrush and BackgroundBrush to be the same. You change the BorderBrush in the Trigger IsSelected==True to your selected Color. Note that there is no need to use a Border in the Header of you TabItem. Just use a TexBlock to control TextWrapping and stuff. There are other minor changes that I explain in the following example:
<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl">
<TabControl.Resources>
<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<ControlTemplate x:Key="simpleTI" TargetType="TabItem">
<Grid>
<Border Name="Border"
BorderThickness="0,0,0,2"
Background="{StaticResource LightBrush}"
BorderBrush="{StaticResource LightBrush}"
CornerRadius="0" >
<ContentPresenter x:Name="ContentSite" Margin="5,0" VerticalAlignment="Center" HorizontalAlignment="Center"
ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#57B481" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TabControl.Resources>
<TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
<TabItem.Header>
<TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap" />
</TabItem.Header>
</TabItem>
<TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
<TabItem.Header>
<TextBlock TextAlignment="Center" Text="Actions Needed 1" TextWrapping="Wrap" />
</TabItem.Header>
</TabItem>
<TabItem MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
<TabItem.Header>
<TextBlock TextAlignment="Center" Text="Actions Needed 2" TextWrapping="Wrap" />
</TabItem.Header>
</TabItem>
</TabControl>
I'm pretty sure you're going to need to override the control template of your TabItem and/or TabControl to accomplish this. See https://msdn.microsoft.com/en-us/library/ms752032.aspx for a starting point.
Related
I am trying to make a nice error message for a text box. The text box:
<DockPanel DockPanel.Dock="Top">
<Label Content="Name: "/>
<TextBox DockPanel.Dock="Top" Text="{Binding Name, ValidatesOnExceptions=True, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource textBoxInError}">
</TextBox>
</DockPanel>
I started with a tooltip. Error style for the textbox:
<!-- Style for the error tooltip for fields -->
<Style x:Key="textBoxInError" TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
That is not sufficient, a better message is required. With this solution the error is not visible until you hover the field:
So I found that I can create another node that will receive the error message from the text box:
<DockPanel DockPanel.Dock="Top">
<Label Content="Name: "/>
<TextBox DockPanel.Dock="Top" Name="editNodeName" Text="{Binding Name, ValidatesOnExceptions=True, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource textBoxInError}">
</TextBox>
<TextBlock Text="{Binding (Validation.Errors)[0].ErrorContent, ElementName=editNodeName}" TextWrapping="Wrap"/>
</DockPanel>
That looks like this - very ugly and it somehow compressed the text box:
Here's a mockup of what I'd like instead, this should not require mouse hover to be visible:
It doesn't have to be exactly like that, but it shouldn't compress the checkbox or otherwise intrude in the form and it should not be visible when there is no error.
Can I float an error message text next to the field? Maybe somehow bind the position to the field's position using binding?
You could define a Validation.ErrorTemplate that contains a Popup that stays open. Something like this:
<Style x:Key="textBoxInError" TargetType="TextBox">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel>
<Popup IsOpen="True" StaysOpen="True" PlacementTarget="{Binding ElementName=border}" Placement="Right">
<Border Background="Yellow" BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding [0].ErrorContent}" />
</Border>
</Popup>
<Border x:Name="border" BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
You may also want to look at this answer.
Alternatively to the answer by mm8, instead of a popup you can use as a ControlTemplate the following, as an inspiration:
<Style x:Key="textBoxInError" TargetType="TextBox">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Border CornerRadius="10,10,10,10" Margin="20">
<Border.Effect>
<DropShadowEffect Color="#FF474747" />
</Border.Effect>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFF99" Offset="0" />
<GradientStop Color="#FFFF99" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid Name="grid1">
<TextBlock Text="Your message here" Padding="10" HorizontalAlignment="Center" Name="lblWarningHeader" VerticalAlignment="Top" FontSize="16"/>
</Grid>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
Issue
I am trying to bind an Image from my TabItem to my TabControlResource section but I cannot seem to do this. The Header text is fine as the TabItem has a Header attribute but there is nothing I can add my image to.
Code
Here is the whole of my TabControl code:
<TabControl Margin="10" BorderBrush="#c83620" BorderThickness="4" Background="#e37e6e" FontFamily="Segoe UI" FontSize="14" >
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
<StackPanel Orientation="Horizontal" Margin="6,4,6,4">
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
<Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#e37e6e" />
<Setter TargetName="Text" Property="TextBlock.Foreground" Value="White"/>
<Setter TargetName="Text" Property="TextBlock.FontWeight" Value="Bold"/>
<Setter TargetName="Border" Property="Margin" Value="1,1,1,-4"/>
<Setter TargetName="Border" Property="Padding" Value="2"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Text" Property="TextBlock.Foreground" Value="#c83620"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Margin="-3,0,0,0" Header="Login">
</TabItem>
<TabItem Header="General" >
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
As you can see from the section below I am binding the content of the label to the header of the TabItem and it works fine:
<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
<StackPanel Orientation="Horizontal" Margin="6,4,6,4">
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
<Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
</StackPanel>
</Border>
But I want different images for each of the TabItems. Where can i bind the Image to on the TabItem to get the correct image?
You can do that by using other properties of the Template, for example Tag property. So the image binding should look like this.
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0"
Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />
And you should define in the resources all images like that.
<Image x:Key="testImage" Source="/WPFTest;component/Images/Reload.png" />
And bind it to the Tag property of TabItem.
<TabItem Header="General" Tag="{StaticResource testImage}" >
I am having a funny issue here with WPF and a button styled. Problem is it contains a path and isMouseOver seems to only trigger when the mouse pointer is over the path but not over the button. That is I have to move the mouse pointer over the white figure inside the button to have the button shaded. Is as if the button wouldn't exist and only the path would.
This is the code for the button:
<Button Grid.Column="5" x:Name="btnClose" Width="30" Height="30" BorderBrush="White"
BorderThickness="0" Style="{StaticResource MenuButtonStyle}"
Command="{Binding ExitCommand}">
<Path Data="M0,0 L16,16 M16,0 L0,16" Stroke="White" StrokeThickness="3"
Margin="0,1,0,0" StrokeEndLineCap="Round" StrokeStartLineCap="Round" />
</Button>
And this is the style:
<Style x:Key="MenuButtonStyle" TargetType="Button">
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="FontSize" Value="13.5"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="ToolTipService.ShowOnDisabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="2.5"
x:Name="ButtonBorder"
BorderThickness="1.2"
RenderTransformOrigin="0.5,0.5">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
<Border x:Name="ButtonShine" Grid.Row="0" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" >
<!--<Border.Effect>
<DropShadowEffect ShadowDepth="1" BlurRadius="1" RenderingBias="Quality" Direction="270" />
</Border.Effect>-->
</Border>
<ContentPresenter Grid.Row="0" VerticalAlignment="Center"
HorizontalAlignment="Center" />
<Border x:Name="shadowMouseOver" Grid.Row="0" Visibility="Hidden"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Background="#7F171717">
</Border>
<Border x:Name="shadowDisabled" Grid.Row="0" Visibility="Hidden"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Background="#AFFFFFFF">
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsEnabled" Value="false">
<Setter Property="Button.Foreground" Value="#FFDEDEDE" />
<Setter Property="Visibility" TargetName="shadowDisabled" Value="Visible"/>
</Trigger>
<Trigger Property="Button.IsMouseOver" Value="true">
<Setter Property="Visibility" TargetName="shadowMouseOver" Value="Visible"/>
</Trigger>
<Trigger Property="Button.IsPressed" Value="true">
<Setter Property="Button.RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="Button.RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.95" ScaleY="0.95"/>
</Setter.Value>
</Setter>
<Setter Property="Visibility" TargetName="shadowMouseOver" Value="Visible"/>
<Setter Property="Background" TargetName="ButtonShine" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBFBFBF" Offset="1"/>
<GradientStop Color="#FF383838"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" TargetName="ButtonShine" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBFBFBF" Offset="1"/>
<GradientStop Color="#FF383838"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any ideas? Bug in WPF? Something not done properly?
This is definitely not a bug, but due to the fact that you provide no background for the control in its template for the default state; thus, the hit test fails in the region outside of the path. If you notice, both shadowMouseOver and shadowDisabled, the only two borders that provide any background, are not visible unless the appropriate events are triggered. Thus, they are not visible to hit tests. Your path, on the other hand, is visible and so it's able to trigger events.
See Hit Testing in the Visual Layer at MSDN for more information:
https://msdn.microsoft.com/library/ms752097(v=vs.100).aspx
Just in case that link fails some time in the future, here's one of the parts that pretty much summarizes what I'm trying to say here:
The purpose of the HitTest methods in the VisualTreeHelper class is to
determine whether a geometry or point coordinate value is within the
rendered content of a given object, such as a control or graphic
element. For example, you could use hit testing to determine whether a
mouse click within the bounding rectangle of an object falls within
the geometry of a circle. You can also choose to override the default
implementation of hit testing to perform your own custom hit test
calculations. The following illustration shows the relationship
between a non-rectangular object's region and its bounding rectangle.
You have a couple of options if you wish to maintain the transparent background look. Either set that background to Transparent, due to the fact that transparent objects are visible to hits tests, or set it to some color, while turning its opacity down to 0. Best place for that background would probably be at ButtonBorder (most outer border), but it'll be your decision to make.
I have a unique request and I am very new to WPF.
I have a list of Items. When I select an Item, it should show the child items.
There are many ways to do this:
1. You have the sub listbox items slide down moving the parent listbox items down. There will be lot of bouncing around
2. To avoid the height change, I am thinking that the sub listbox items can popup and I select the child items. If not, then I click away and get back to my parent listbox items.
I have no idea where to begin adding a sub listbox items underneath it's parent listbox item.
I have two listbox in my xaml
<Window x:Class="MakeModel.MakeModelYear"
Icon="cc_64x64_blue_02.ico"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MakeModel"
Title="Car Make and Model" Height="740.667" Width="426" Opacity="0.9"
WindowStartupLocation="CenterScreen" ResizeMode="CanResize" Background="White">
<Window.Resources>
</Window.Resources>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFE" Offset="0"/>
<GradientStop Color="#FF6699CC" Offset="1.2"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="156*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="53*"/>
<ColumnDefinition Width="198*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,31,0,29" Grid.ColumnSpan="3">
<GroupBox Header="Make / Model" BorderBrush="WhiteSmoke" BorderThickness="0" Margin="5,0" Foreground="#FF0B6C78" FontSize="18" FontFamily="Microsoft Sans Serif">
<!--Task -->
<StackPanel>
<ListBox x:Name="cmbMake" HorizontalAlignment="Left" VerticalAlignment="Top" Width="387" Cursor="Arrow"
ItemsSource="{Binding SelectedMake}" DisplayMemberPath ="Make"
SelectionChanged="cmbMake_SelectionChanged" SelectionMode="Single" RenderTransformOrigin="0.494,1.409" Margin="0,3,0,0" Height="150" BorderBrush="#FF336699" FontFamily="Microsoft Sans Serif" FontSize="12" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
<EventSetter Event="UIElement.MouseEnter" Handler="cmbFirstDigitLineItem_MouseMove" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Background" Value="#FFD7E1EC" />
</Trigger>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Template>
<ControlTemplate>
<Border CornerRadius="5" BorderThickness="0" BorderBrush="#FF336699">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ListBox.Template>
</ListBox>
</StackPanel>
</GroupBox>
</StackPanel>
<StackPanel Margin="0,205,0,29" Grid.ColumnSpan="3">
<GroupBox Header="" BorderBrush="WhiteSmoke" BorderThickness="0" Margin="5,0">
<!--Subtask -->
<StackPanel>
<ListBox x:Name="cmbModel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="387" Cursor="Arrow"
ItemsSource="{Binding SelectedModel}" DisplayMemberPath ="Model"
SelectionChanged="cmbModel_SelectionChanged" SelectionMode="Single" RenderTransformOrigin="0.494,1.409" Margin="0,3,0,0" Background="#FFE0E0E0" BorderBrush="#FF336699" FontFamily="Arial">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
<EventSetter Event="UIElement.MouseEnter" Handler="cmbSecondDigitLineItem_MouseMove" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Background" Value="#FFD7E1EC" />
</Trigger>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Template>
<ControlTemplate>
<Border CornerRadius="5" BorderThickness="0" BorderBrush="#FF336699">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ListBox.Template>
</ListBox>
</StackPanel>
</GroupBox>
</StackPanel>
</Grid>
</Window>
Well, let me try to explain in plain and simple English :)
First, you should have your classes something like this:
public class Foo{
public ObservableCollection<MyParentObject> ListToBind {get;set;}
.... (rest of properties)
}
public class MyParentObject{
public ObservableCollection<MyChildObject> ChildListToBind {get;set;}
.... (rest of properties)
}
Then in your XAML you can have something like this:
And then as Window or UserControl Resources you have:
<DataTemplate x:key="listItemTemplate">
<Grid>
<ListBox ItemsSource={Binding ChildListToBind}" ItemTemplate="........"/>
</Grid>
</DataTemplate>
This is not perfect code...but hope it gives you head start to what you want.
Regards,
I need the area series charting to look like:
I succeeded in hiding the two axis and changing the colors to gradient brush.
I still need help on changing the opacity so the green one will be "behind" the orange one.
Also - How do I change the little points on the graph?
How do I change the background to be transparent?
How to hide the chart title?
Right now it looks like this:
Any help will be very appreciated!
Here is my xaml code:
<LinearGradientBrush x:Key="GreenGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#77b31a" Offset="0.75"></GradientStop>
<GradientStop Color="#85d805" Offset="0.45"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="OrangeGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#fff92900" Offset="0.75"></GradientStop>
<GradientStop Color="#ffff6115" Offset="0.45"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="GreenAreaSeriesStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource GreenGradientBrush}" />
<Setter Property="Opacity" Value="1"></Setter>
</Style>
<Style x:Key="OrangeAreaSeriesStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource OrangeGradientBrush}" />
<Setter Property="Opacity" Value="1"></Setter>
</Style>
<datavis:ResourceDictionaryCollection x:Key="MyPalette">
<ResourceDictionary>
<Style x:Key="DataPointStyle" BasedOn="{StaticResource GreenAreaSeriesStyle}" TargetType="Control" >
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" BasedOn="{StaticResource OrangeAreaSeriesStyle}" TargetType="Control" >
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
<Style x:Key ="PerformanceChartMajorTickMarkStyle" TargetType="Line">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</Window.Resources>
<charting:Chart Palette="{StaticResource MyPalette}" HorizontalAlignment="Left" Margin="39,38,0,0" Name="chart1" Title="Chart Title" VerticalAlignment="Top" Width="815" Height="598" OverridesDefaultStyle="False">
<charting:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="Width" Value="0" />
</Style>
</charting:Chart.LegendStyle>
<charting:AreaSeries Name="Green" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" >
<charting:AreaSeries.IndependentAxis>
<charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
</charting:AreaSeries.IndependentAxis>
<charting:AreaSeries.DependentRangeAxis>
<charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
</charting:AreaSeries.DependentRangeAxis>
</charting:AreaSeries>
<charting:AreaSeries Name="Orange" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
<charting:AreaSeries.IndependentAxis>
<charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
</charting:AreaSeries.IndependentAxis>
<charting:AreaSeries.DependentRangeAxis>
<charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
</charting:AreaSeries.DependentRangeAxis>
</charting:AreaSeries>
</charting:Chart>
I posted a similar question and got the following answer, which really helped me.
<ch:Chart Margin="56,21,50,72" Title="MyChart" DataContext="{Binding ElementName=Window, Mode=OneWay}" Style="{StaticResource controlStyle}" >
<ch:AreaSeries Name="DefaultArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" Title="111111" >
<ch:AreaSeries.Style>
<Style TargetType="ch:AreaSeries">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ch:AreaSeries">
<Canvas x:Name="PlotArea">
<Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Pink" Style="{TemplateBinding PathStyle}" Opacity="1" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ch:AreaSeries.Style>
</ch:AreaSeries>
<ch:AreaSeries Name="PersonnelArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" >
<ch:AreaSeries.Style>
<Style TargetType="ch:AreaSeries">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ch:AreaSeries">
<Canvas x:Name="PlotArea">
<Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Yellow" Style="{TemplateBinding PathStyle}" Opacity="1" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ch:AreaSeries.Style>
</ch:AreaSeries>
</ch:Chart>
You can also set the style as Ressource in XAML and then assign it dynamically in the code behind.
Here my original question with the Answer:
WPF AreaSeries: How to change background opacity?