I am using Chart tool. Here is my wpf code:
<Window x:Class="UserGraphShow.GraphOutput"
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:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
mc:Ignorable="d"
Title="MainWindow" Height="446" Width="726" >
<Grid>
<DVC:Chart Name="Chart" Grid.ColumnSpan="3" Background="Blue" Title="Line">
<DVC:Chart.Series>
<DVC:LineSeries Title=" Your Graph" IndependentValueBinding="{Binding Path=Key}" DependentValueBinding="{Binding Path=Value}" Opacity="0" />
</DVC:Chart.Series>
<DVC:Chart.DataContext >
<Style TargetType="Grid" >
<Setter Property="Opacity" Value="0" />
</Style>
</DVC:Chart.DataContext>
<DVC:Chart.Axes>
<DVC:LinearAxis Orientation="Y" Minimum="-302" Maximum="0"/>
<DVC:LinearAxis Orientation="X" Maximum="509" Minimum="0"/>
<DVC:LinearAxis Visibility="Hidden"/>
</DVC:Chart.Axes>
</DVC:Chart>
<Button x:Name="Button" Content="Show" HorizontalAlignment="Left" Margin="8,10,0,0" VerticalAlignment="Top" Width="75" Grid.Column="1" Height="22" Click="button_Click"/>
</Grid>
</Window>
I am trying to display arrays of x[] and y[] as a plot.
Here is code of a button:
private void button_Click(object sender, RoutedEventArgs e)
{
var b = GetUserGraphUnfoInfo.FindXy("../../../Main_Logic/image.jpeg");
var x = b[0]; // array of x
var y = b[1]; // array of y
var ls = new LineSeries
{
IndependentValueBinding = new Binding("Key"),
DependentValueBinding = new Binding("Value")
};
var a = new KeyValuePair<int, int>[x.Length-1];
for (var i = 0; i < x.Length-1; i++)
a[i] = new KeyValuePair<int, int>(x[i], y[i]);
ls.ItemsSource = a;
Chart.Series.Clear();
Chart.Series.Add(ls);
}
Everything works ok, though the dots are too big, how do i remove them at all?
Here is what i get:
Create and apply a style to your data points, as below:
XAML:
<Window x:Class="WpfApplication342.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:dvc="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:local="clr-namespace:WpfApplication342"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<PointCollection>1,10 2,20, 3,30</PointCollection>
</Window.DataContext>
<Window.Resources>
<Style x:Key="LineDataPointStyle1" TargetType="{x:Type dvc:LineDataPoint}">
<Setter Property="Background" Value="Orange"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="64"/>
<Setter Property="Height" Value="64"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type dvc:LineDataPoint}">
<Grid x:Name="Root" Opacity="1">
<Grid.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
</Grid.ToolTip>
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/>
<Ellipse RenderTransformOrigin="0.661,0.321">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.681,0.308">
<GradientStop Color="Transparent"/>
<GradientStop Color="#FF3D3A3A" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Ellipse x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<dvc:Chart>
<dvc:LineSeries ItemsSource="{Binding}"
DependentValuePath="Y"
IndependentValuePath="X"
DataPointStyle="{DynamicResource LineDataPointStyle1}"/>
</dvc:Chart>
</Grid>
Now you can manipulate the style in several ways to eliminate the dots: use transparent colors, set width and height to zero, or even modify the control template altogether. Setting width and height to zero:
Related
So I've been playing around with creating a custom title bar using WPF and this is what I have
<!--Add the WindowChrome object-->
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="34" />
</WindowChrome.WindowChrome>
<Window.Resources>
<ResourceDictionary>
<Style x:Key="CaptionButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot" Background="Transparent" Width="44" Height="30">
<TextBlock x:Name="txt" Text="{TemplateBinding Content}" FontFamily="Segoe MDL2 Assets" FontSize="10"
Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"
RenderOptions.ClearTypeHint="Auto" TextOptions.TextRenderingMode="Aliased" TextOptions.TextFormattingMode="Display"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="LayoutRoot" Property="Background" Value="#E5E5E5"/>
<Setter TargetName="txt" Property="Foreground" Value="#000000"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Minimize-->
<Style x:Key="MinimizeButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
<Setter Property="Content" Value=""/>
</Style>
<!--Maximize-->
<Style x:Key="MaximizeButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
<Setter Property="Content" Value=""/>
</Style>
<!--Restore-->
<Style x:Key="RestoreButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
<Setter Property="Content" Value=""/>
</Style>
<!--Close-->
<Style x:Key="CloseButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
<Setter Property="Content" Value=""/>
</Style>
</ResourceDictionary>
</Window.Resources>
<!-- Title bar button commands -->
<Window.CommandBindings>
<CommandBinding Command="{x:Static SystemCommands.CloseWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Close" />
<CommandBinding Command="{x:Static SystemCommands.MaximizeWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Maximize" />
<CommandBinding Command="{x:Static SystemCommands.MinimizeWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Minimize" />
<CommandBinding Command="{x:Static SystemCommands.RestoreWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Restore" />
</Window.CommandBindings>
<Border x:Name="MainWindowBorder" BorderBrush="LightCoral" BorderThickness="0" >
<Grid x:Name="parentContainer" Background="LightBlue">
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<!--Window chrome-->
<Grid Grid.Row="0" Height="30" Background="#F999">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--App icon-->
<Image Source="/Resources/watermelon.ico" Width="18" Margin="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Text="Sweet App" FontFamily="Arial" Margin="4 3 0 0" />
</StackPanel>
<!--Caption buttons-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MinimizeButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Minimize"
Command="{x:Static SystemCommands.MinimizeWindowCommand}"/>
<Button x:Name="RestoreButton" Visibility="Collapsed" Style="{StaticResource RestoreButtonStyle}"
Command="{x:Static SystemCommands.RestoreWindowCommand}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore"/>
<Button x:Name="MaximizeButton" Visibility="Visible" Style="{StaticResource MaximizeButtonStyle}"
Command="{x:Static SystemCommands.MaximizeWindowCommand}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" />
<Button Style="{StaticResource CloseButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
Command="{x:Static SystemCommands.CloseWindowCommand}"/>
</StackPanel>
</Grid>
<!--App content-->
<Grid Grid.Row="1" x:Name="AppArea">
<Path Data="M50,0L100,50 50,100 0,50z" Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2" />
</Grid>
</Grid>
</Border>
And that works great!
However if I were to comment out this part
<Window.CommandBindings>
<CommandBinding Command="{x:Static SystemCommands.CloseWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Close" />
<CommandBinding Command="{x:Static SystemCommands.MaximizeWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Maximize" />
<CommandBinding Command="{x:Static SystemCommands.MinimizeWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Minimize" />
<CommandBinding Command="{x:Static SystemCommands.RestoreWindowCommand}" CanExecute="CommandBinding_CanExecute" Executed="CommandBinding_Executed_Restore" />
</Window.CommandBindings>
Then when I hover over the buttons (Minimize, Maximize and Close) they don't change color anymore and there are no obvious errors presented to me. And as far as I know, it shouldn't change anything UI related since the actual trigger for changing the button background is already defined above in the Window.Resources
Why is this happening?
Here's the code behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
StateChanged += MainWindowStateChangeRaised;
}
// Can execute
private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = true;
}
// Minimize
private void CommandBinding_Executed_Minimize(object sender, ExecutedRoutedEventArgs e)
{
SystemCommands.MinimizeWindow(this);
}
// Maximize
private void CommandBinding_Executed_Maximize(object sender, ExecutedRoutedEventArgs e)
{
SystemCommands.MaximizeWindow(this);
}
// Restore
private void CommandBinding_Executed_Restore(object sender, ExecutedRoutedEventArgs e)
{
SystemCommands.RestoreWindow(this);
}
// Close
private void CommandBinding_Executed_Close(object sender, ExecutedRoutedEventArgs e)
{
SystemCommands.CloseWindow(this);
}
// State change
private void MainWindowStateChangeRaised(object sender, EventArgs e)
{
if (WindowState == WindowState.Maximized)
{
MainWindowBorder.BorderThickness = new Thickness(8);
RestoreButton.Visibility = Visibility.Visible;
MaximizeButton.Visibility = Visibility.Collapsed;
}
else
{
MainWindowBorder.BorderThickness = new Thickness(0);
RestoreButton.Visibility = Visibility.Collapsed;
MaximizeButton.Visibility = Visibility.Visible;
}
}
}
Good evening guys,
I'd really like to have a custom button with text and vector icon.. I searched for something similar but no luck..so I tried by myself to make a custom control but I am not able to make it works: no errors or warnings found but the icon doesn't appear at all.
Here below my code:
Custom control CS:
public class ThButton : Button
{
static ThButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ThButton), new FrameworkPropertyMetadata(typeof(ThButton)));
}
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register("Icon", typeof(Path), typeof(ThButton), new UIPropertyMetadata(null));
public Path Icon
{
get { return (Path)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
public static readonly DependencyProperty ThLabelProperty =
DependencyProperty.Register("ThLabel", typeof(string), typeof(ThButton), new UIPropertyMetadata(null));
public String ThLabel
{
get { return (String)GetValue(ThLabelProperty); }
set { SetValue(ThLabelProperty, value); }
}
}
generic.xaml (triggers etc. removed since not useful for this):
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomControlTest">
<Path x:Key="BoatIcon" Fill="Black" Data="M6,6H18V9.96L12,8L6,9.96M3.94,19H4C5.6,19 7,18.12 8,17C9,18.12 10.4,19 12,19C13.6,19 15,18.12 16,17C17,18.12 18.4,19 20,19H20.05L21.95,12.31C22.03,12.06 22,11.78 21.89,11.54C21.76,11.3 21.55,11.12 21.29,11.04L20,10.62V6C20,4.89 19.1,4 18,4H15V1H9V4H6A2,2 0 0,0 4,6V10.62L2.71,11.04C2.45,11.12 2.24,11.3 2.11,11.54C2,11.78 1.97,12.06 2.05,12.31M20,21C18.61,21 17.22,20.53 16,19.67C13.56,21.38 10.44,21.38 8,19.67C6.78,20.53 5.39,21 4,21H2V23H4C5.37,23 6.74,22.65 8,22C10.5,23.3 13.5,23.3 16,22C17.26,22.65 18.62,23 20,23H22V21H20Z" />
<Color x:Key="BackgroundColor1" A="255" R="0" G="133" B="209"/>
<Color x:Key="BackgroundColor2" A="255" R="0" G="61" B="94"/>
<Color x:Key="MouseOverBackgroundColor1" A="255" R="0" G="156" B="231"/>
<Color x:Key="MouseOverBackgroundColor2" A="255" R="0" G="90" B="155"/>
<Color x:Key="MousePressedBackgroundColor1" A="255" R="0" G="98" B="195"/>
<Color x:Key="MousePressedBackgroundColor2" A="255" R="0" G="36" B="72"/>
<Color x:Key="IsNotEnabledBackgroundColor1" A="255" R="233" G="233" B="233"/>
<Color x:Key="IsNotEnabledBackgroundColor2" A="255" R="240" G="240" B="240"/>
<SolidColorBrush x:Key="ThBorderBrush" Color="#ECECEC"></SolidColorBrush>
<Style TargetType="{x:Type local:ThButton}">
<Setter Property="BorderBrush" Value="{StaticResource ThBorderBrush}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ThButton}">
<Border x:Name="t"
Margin="{TemplateBinding Margin}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="6">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource BackgroundColor1}"/>
<GradientStop x:Name="BackgroundGradientStop2" Offset="1" Color="{StaticResource BackgroundColor2}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle Width="20" Height="20" Fill="black" Margin="0,0,0,5">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{TemplateBinding Icon}"/>
</Rectangle.OpacityMask>
</Rectangle>
<Label Content="{TemplateBinding ThLabel}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And finally mainWindow.xaml:
<local:ThButton Width="100" Icon="{StaticResource BoatIcon}" ThLabel="Test"/>
if I put the "{StaticResource BoatIcon}" in place of "{TemplateBinding Icon}" in Visual (generic.xaml) the icon appears so I suppose the problem is all about how I tried to use the DependencyProperty.
This can be done using a custom UserControl quite easily.
First, add your image to your project resources, and make 'Build Type = Resource' in the properties. Do this by selecting the newly added image and right clicking, then setting the above property.
Next, create a UserControl. Here's my XAML
<UserControl x:Class="ListViewDragAndDrop.UCPictureButton"
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:ListViewDragAndDrop"
mc:Ignorable="d"
d:DesignHeight="32" d:DesignWidth="128">
<Grid>
<Button Click="Button_Click">
<StackPanel Orientation="Horizontal">
<Image Source="/Resources/solution.png"
Margin="4, 4, 8, 4"/>
<TextBlock Text="Button Text"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</Grid>
</UserControl>
Make sure the 'Source' of the image is correct. What's shown above is where it's in my project which is the default.
Then the UserControl code behind:
public partial class UCPictureButton : UserControl
{
public event RoutedEventHandler RoutedButtonClick;
public UCPictureButton()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
RoutedButtonClick?.Invoke(this, e);
}
}
In the button click event, we invoke the RoutedEvent we declared there.
Now on your Main window or wherever you want to use the button:
<local:UCPictureButton Grid.Column="2" Width="120" Height="32">
<i:Interaction.Triggers>
<i:EventTrigger EventName="RoutedButtonClick">
<i:InvokeCommandAction Command="{Binding CmdButtonClick}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</local:UCPictureButton>
The i namespace is the interactivity namespace:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
Now all you have to do is in your ViewModel simply hook up a method to the above declared CmdButtonClick command.
I'm using the MVVM Light toolkit and it looks like this:
public RelayCommand CmdButtonClick { get; private set; }
public MainViewModel(IDataService dataService)
{
CmdButtonClick = new RelayCommand(ButtonClick);
}
private void ButtonClick()
{
// Button action
}
Result:
I tried different things but without success
I have to size the window relative to the dynamic numbers of tiles (MahApps.Metro) but only in height, once the height exceeded of my screen I put a scroolbar
In my window I have for the moment:
<Controls:MetroWindow x:Class="EpiTUILE.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="EpiTUILE" Height="270" Width="400" ShowMaxRestoreButton="False" ShowCloseButton="False"
Top="0" Loaded="MetroWindow_Loaded" Icon="Alerte.png" Closing="MetroWindow_Closing"
MouseMove="MetroWindow_MouseMove" ResizeMode="CanMinimize" MouseEnter="MetroWindow_MouseEnter"
StateChanged="MetroWindow_StateChanged" WindowStyle="None" UseLayoutRounding="True"
AllowsTransparency="True" Background="Transparent" WindowState="Minimized">
<Window.Resources>
<Style x:Key="TileStyle" TargetType="Controls:Tile">
<EventSetter Event="PreviewMouseDown" Handler="OnTileClick" />
<Setter Property="Width" Value="380" />
<Setter Property="Height" Value="70" />
<Setter Property="TitleFontSize" Value="10" />
</Style>
</Window.Resources>
<Grid Height="Auto">
<ScrollViewer x:Name="MyScrollViewer" VerticalScrollBarVisibility="Auto" Grid.Row="1" Width="Auto" Height="Auto" Grid.ColumnSpan="2" ScrollViewer.FlowDirection="LeftToRight" >
<WrapPanel Name="PanelTile" Orientation="Vertical" HorizontalAlignment="Center" Height="Auto" >
</WrapPanel>
</ScrollViewer>
</Grid>
I then build my tiles in code behind:
PanelTile.Children.Clear();
for (int i = 0; i < _nbrTile; i++)
{
Tile _tile = new Tile();
_tile.HorizontalTitleAlignment = HorizontalAlignment.Right;
_tile.Title = i.ToString();
_tile.Style = this.FindResource("TileStyle") as Style;
_tile.Content = "Type Alerte " + i;
PanelTile.Children.Add(_tile);
}
I'm using Modern UI Charts in my project (Modern UI Charts), and I'm trying to change the chart foreground and palette based on ValueMember.
I have a converter:
public class MetricsColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
//Dim num As Integer
string color = null;
decimal intValue = default(decimal);
if (decimal.TryParse(value.ToString(), intValue)) {
if (intValue <= 60.0) {
return "Red";
} else if (intValue >= 60.01 && intValue < 80.0) {
return "Yellow";
} else if (intValue >= 80.01) {
return "Green";
}
}
return color;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
And my xaml with a chart:
<chart:RadialGaugeChart
ChartTitleVisibility="Collapsed"
ChartLegendVisibility="Collapsed"
ToolTipFormat="{}Caption: {0}, Value: '{1}', Series: '{2}', Percentage: {3:P2}"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,5,5,5" Height="170" >
<chart:RadialGaugeChart.Style>
<Style TargetType="{x:Type chart:RadialGaugeChart}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=ProductivitySeries, Path=ValueMember, Converter={StaticResource MetricsConverter}}" Value="Green">
<Setter Property="Foreground" Value="{StaticResource Flat_GreenAccentBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ProductivitySeries, Path=ValueMember, Converter={StaticResource MetricsConverter}} "Value="Yellow">
<Setter Property="Foreground" Value="{StaticResource Flat_MetricYellowBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ProductivitySeries, Path=ValueMember, Converter={StaticResource MetricsConverter}}" Value="Red">
<Setter Property="Foreground" Value="{StaticResource Flat_MetricRedBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</chart:RadialGaugeChart.Style>
<chart:RadialGaugeChart.Series>
<chart:ChartSeries
Name="ProductivitySeries"
SeriesTitle="Productivity"
ItemsSource="{Binding TeamLeaderViewM.TeamLeaderMetrics}"
DisplayMember="TeamLeader"
ValueMember="Productivity"/>
</chart:RadialGaugeChart.Series>
</chart:RadialGaugeChart>
Unfortunately, nothing is changing here. Color is the same, all the time.
How can I implement this to my charts?
Thank you for suuggestions
You have to modify the default PlotterArea style as shown below:
<Window
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:WpfApplication1"
xmlns:MetroChart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart"
x:Class="WpfApplication1.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/De.TorstenMandelkow.MetroChart;component/Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:MetricsColorConverter x:Key="Converter1"></local:MetricsColorConverter>
<x:Array x:Key="SampleData1" Type="{x:Type local:MyData}">
<local:MyData TeamLeader="Team A" Productivity="50"></local:MyData>
<local:MyData TeamLeader="Team B" Productivity="75"></local:MyData>
<local:MyData TeamLeader="Team C" Productivity="90"></local:MyData>
</x:Array>
<Style x:Key="RadialGaugeChartPlotterAreaStyle1" TargetType="MetroChart:PlotterArea">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MetroChart:PlotterArea">
<MetroChart:FadingListView Style="{StaticResource FadingListViewStyle}" ItemsSource="{Binding Path=ParentChart.DataPointGroups, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<MetroChart:FadingListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</MetroChart:FadingListView.ItemsPanel>
<MetroChart:FadingListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Visibility="{Binding Path=ShowCaption, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="{Binding Path=Caption}" Style="{StaticResource SeriesTitleStyle}" />
</Border>
<MetroChart:FadingListView Style="{StaticResource FadingListViewStyle}"
x:Name="itemsControl"
ItemsSource="{Binding Path=DataPoints}"
Margin="5"
Grid.Row="1">
<MetroChart:FadingListView.ItemsPanel>
<ItemsPanelTemplate>
<!--<StackPanel Orientation="Horizontal" />-->
<MetroChart:UniformGridPanel Orientation="Horizontal" MinimalGridWidth="150.0" />
</ItemsPanelTemplate>
</MetroChart:FadingListView.ItemsPanel>
<MetroChart:FadingListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<MetroChart:RadialGaugePiece
Grid.Row="0"
Margin="5"
Background="{Binding Path=Value, Converter={StaticResource Converter1}}"
SelectedBrush="{Binding Path=SelectedBrush}"
Value="{Binding Path=Value}"
IsClickedByUser="{Binding Path=IsClickedByUser, Mode=TwoWay}"
IsSelected="{Binding Path=IsSelected}"
ClientWidth="180"
ClientHeight="180"
x:Name="radial">
</MetroChart:RadialGaugePiece>
<Border Grid.Row="1" HorizontalAlignment="Center" Margin="0 0 0 10">
<TextBlock Text="{Binding Path=SeriesCaption}" />
</Border>
</Grid>
</DataTemplate>
</MetroChart:FadingListView.ItemTemplate>
</MetroChart:FadingListView>
</Grid>
</DataTemplate>
</MetroChart:FadingListView.ItemTemplate>
</MetroChart:FadingListView>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<MetroChart:RadialGaugeChart ChartTitle="My Sample"
ChartSubTitle="Productivity"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PlotterAreaStyle="{StaticResource RadialGaugeChartPlotterAreaStyle1}">
<MetroChart:RadialGaugeChart.Series>
<MetroChart:ChartSeries Name="ProductivitySeries"
SeriesTitle="My Series"
DisplayMember="TeamLeader"
ValueMember="Productivity"
ItemsSource="{StaticResource SampleData1}" />
</MetroChart:RadialGaugeChart.Series>
</MetroChart:RadialGaugeChart>
</Grid>
I need a thumb control that can be sized using a mouse. When the user hovers the mouse over one of the ends a size cursor should be displayed and when the user clicks and drags the end of the control it will be re-sized.
How can that be achieved?
Here is one I made a while ago, it allows Move and Resize, but you can remove the Move logic and it should work fine (the style is still a bit messy, but it works pretty well)
Its based on ContentControl so you can add any Element inside and Move/Resize on a Canvas, It uses 3 Adorners, one for Resize, one for Move and one to display information (current size)
Here is a full working example if you want to test/use/modify/improve :)
Code:
namespace WpfApplication21
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
public class ResizeThumb : Thumb
{
public ResizeThumb()
{
DragDelta += new DragDeltaEventHandler(this.ResizeThumb_DragDelta);
}
private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
{
Control designerItem = this.DataContext as Control;
if (designerItem != null)
{
double deltaVertical, deltaHorizontal;
switch (VerticalAlignment)
{
case VerticalAlignment.Bottom:
deltaVertical = Math.Min(-e.VerticalChange, designerItem.ActualHeight - designerItem.MinHeight);
designerItem.Height -= deltaVertical;
break;
case VerticalAlignment.Top:
deltaVertical = Math.Min(e.VerticalChange, designerItem.ActualHeight - designerItem.MinHeight);
Canvas.SetTop(designerItem, Canvas.GetTop(designerItem) + deltaVertical);
designerItem.Height -= deltaVertical;
break;
default:
break;
}
switch (HorizontalAlignment)
{
case HorizontalAlignment.Left:
deltaHorizontal = Math.Min(e.HorizontalChange, designerItem.ActualWidth - designerItem.MinWidth);
Canvas.SetLeft(designerItem, Canvas.GetLeft(designerItem) + deltaHorizontal);
designerItem.Width -= deltaHorizontal;
break;
case HorizontalAlignment.Right:
deltaHorizontal = Math.Min(-e.HorizontalChange, designerItem.ActualWidth - designerItem.MinWidth);
designerItem.Width -= deltaHorizontal;
break;
default:
break;
}
}
e.Handled = true;
}
}
public class MoveThumb : Thumb
{
public MoveThumb()
{
DragDelta += new DragDeltaEventHandler(this.MoveThumb_DragDelta);
}
private void MoveThumb_DragDelta(object sender, DragDeltaEventArgs e)
{
Control designerItem = this.DataContext as Control;
if (designerItem != null)
{
double left = Canvas.GetLeft(designerItem);
double top = Canvas.GetTop(designerItem);
Canvas.SetLeft(designerItem, left + e.HorizontalChange);
Canvas.SetTop(designerItem, top + e.VerticalChange);
}
}
}
public class SizeAdorner : Adorner
{
private Control chrome;
private VisualCollection visuals;
private ContentControl designerItem;
protected override int VisualChildrenCount
{
get
{
return this.visuals.Count;
}
}
public SizeAdorner(ContentControl designerItem)
: base(designerItem)
{
this.SnapsToDevicePixels = true;
this.designerItem = designerItem;
this.chrome = new Control();
this.chrome.DataContext = designerItem;
this.visuals = new VisualCollection(this);
this.visuals.Add(this.chrome);
}
protected override Visual GetVisualChild(int index)
{
return this.visuals[index];
}
protected override Size ArrangeOverride(Size arrangeBounds)
{
this.chrome.Arrange(new Rect(new Point(0.0, 0.0), arrangeBounds));
return arrangeBounds;
}
}
}
Xaml:
<Window x:Class="WpfApplication21.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication21"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<local:MoveThumb Cursor="SizeAll">
<local:MoveThumb.Style>
<Style TargetType="{x:Type local:MoveThumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MoveThumb}">
<Rectangle Fill="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:MoveThumb.Style>
</local:MoveThumb>
<Control x:Name="resizer">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid>
<Grid Opacity="0" Margin="-3">
<local:ResizeThumb Height="3" Cursor="SizeNS" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<local:ResizeThumb Width="3" Cursor="SizeWE" VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
<local:ResizeThumb Width="3" Cursor="SizeWE" VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<local:ResizeThumb Height="3" Cursor="SizeNS" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
<local:ResizeThumb Width="7" Height="7" Margin="-2" Cursor="SizeNWSE" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<local:ResizeThumb Width="7" Height="7" Margin="-2" Cursor="SizeNESW" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<local:ResizeThumb Width="7" Height="7" Margin="-2" Cursor="SizeNESW" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<local:ResizeThumb Width="7" Height="7" Margin="-2" Cursor="SizeNWSE" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
</Grid>
<Grid IsHitTestVisible="False" Opacity="1" Margin="-3">
<Grid.Resources>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Stroke" Value="#FFC8C8C8" />
<Setter Property="StrokeThickness" Value=".5" />
<Setter Property="Width" Value="7" />
<Setter Property="Height" Value="7" />
<Setter Property="Margin" Value="-2" />
<Setter Property="Fill" Value="Silver" />
</Style>
</Grid.Resources>
<Rectangle SnapsToDevicePixels="True" StrokeThickness="1" Margin="1" Stroke="Black" StrokeDashArray="4 4"/>
<Ellipse HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Ellipse HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Ellipse HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Ellipse HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Grid x:Name="sizeInfo" SnapsToDevicePixels="True">
<Path Stroke="Red" StrokeThickness="1" Height="10" VerticalAlignment="Bottom" Margin="-2,0,-2,-15" Stretch="Fill" Data="M0,0 0,10 M 0,5 100,5 M 100,0 100,10"/>
<TextBlock Text="{Binding Width}" Background="White" Padding="3,0,3,0" Foreground="Red" Margin="0,0,0,-18" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Path Stroke="Red" StrokeThickness="1" Width="10" HorizontalAlignment="Right" Margin="0,-2,-15,-2" Stretch="Fill" Data="M5,0 5,100 M 0,0 10,0 M 0,100 10,100"/>
<TextBlock Text="{Binding Height}" Background="White" Foreground="Red" Padding="3,0,3,0" Margin="0,0,-18,0" HorizontalAlignment="Right" VerticalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" CenterX="1" CenterY="0.5"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Grid>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="sizeInfo" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="sizeInfo" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Canvas>
<ContentControl Width="183" Height="110" Canvas.Left="166" Canvas.Top="50" />
</Canvas>
</Window>
Result:
With content inside (Button)
Sorry the cursors do not show when using SnipTool