I have chart.
I style all points on it using some custom template :
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
<chartingToolkit:LineSeries.DataPointStyle>
<Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
<Setter Property="Background" Value="#bdb3ce" />
<Setter Property="Foreground" Value="#bdb3ce" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
<Canvas>
<Ellipse Height="8" Width="8" StrokeThickness="2" Stroke="#bdb3ce" Fill="#423852"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:LineSeries.DataPointStyle>
</chartingToolkit:LineSeries>
Before using Template it was possible to click on point on chart to make it "active" (point became red).
How i can make point active now after applying template?
Before templating code :
<chartingToolkit:Chart Grid.Row="1" Grid.ColumnSpan="2" Name="lineChart" VerticalAlignment="Top" Height="200">
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Orientation="X">
<chartingToolkit:LinearAxis.MajorTickMarkStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="White" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Y1" Value="-4" />
<Setter Property="Y2" Value="4" />
</Style>
</chartingToolkit:LinearAxis.MajorTickMarkStyle>
</chartingToolkit:LinearAxis>
<chartingToolkit:LinearAxis Orientation="Y">
<chartingToolkit:LinearAxis.MajorTickMarkStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="White" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Y1" Value="-4" />
<Setter Property="Y2" Value="4" />
</Style>
</chartingToolkit:LinearAxis.MajorTickMarkStyle>
</chartingToolkit:LinearAxis>
</chartingToolkit:Chart.Axes>
<chartingToolkit:Chart.Style>
<Style TargetType="Control">
<Setter Property="Foreground" Value="White" />
</Style>
</chartingToolkit:Chart.Style>
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0" />
</Style>
</chartingToolkit:Chart.LegendStyle>
<chartingToolkit:Chart.PlotAreaStyle>
<Style TargetType="Grid">
<Setter Property="Background" Value="Transparent" />
</Style>
</chartingToolkit:Chart.PlotAreaStyle>
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
<chartingToolkit:LineSeries.DataPointStyle>
<Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="White" />
</Style>
</chartingToolkit:LineSeries.DataPointStyle>
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>
You have to create a Style for your Ellipse and handle IsMouseOver and MouseDown event.
XAML:
<Window.Resources>
<Style x:Key="EllipseStyle1" TargetType="{x:Type Ellipse}">
<Setter Property="Fill" Value="Yellow"></Setter>
<Setter Property="Stroke" Value="Orange"></Setter>
<Setter Property="Height" Value="12"></Setter>
<Setter Property="Width" Value="12"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="StrokeThickness" Value="3"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="PolylineStyle1" TargetType="{x:Type Polyline}">
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="Stroke" Value="Blue"></Setter>
</Style>
<Style x:Key="DataPointStyle1" TargetType="{x:Type chartingToolkit:LineDataPoint}">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Width" Value="16"></Setter>
<Setter Property="Height" Value="16"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
<Ellipse Style="{DynamicResource EllipseStyle1}" MouseDown="Ellipse_MouseDown"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineSeriesStyle1" TargetType="{x:Type chartingToolkit:LineSeries}" >
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
<Canvas x:Name="PlotArea">
<Polyline Points="{TemplateBinding Points}" Style="{DynamicResource PolylineStyle1}" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<chartingToolkit:Chart Margin="0" Title="Chart Title">
<chartingToolkit:Chart.DataContext>
<PointCollection>1,10 2,20 3,30 4,40</PointCollection>
</chartingToolkit:Chart.DataContext>
<chartingToolkit:LineSeries DependentValuePath="Y" IndependentValuePath="X"
ItemsSource="{Binding}" IsSelectionEnabled="True"
Style="{DynamicResource LineSeriesStyle1}"
DataPointStyle="{DynamicResource DataPointStyle1}"/>
</chartingToolkit:Chart>
</Grid>
Code-Behind:
private void Ellipse_MouseDown(object sender, MouseButtonEventArgs e)
{
curr = (Ellipse)sender;
if (curr == prev)
{
if (curr.Fill == Brushes.Yellow)
curr.Fill = Brushes.Red;
else if (curr.Fill == Brushes.Red)
curr.Fill = Brushes.Yellow;
}
else
{
if (prev == null)
prev = curr;
prev.Fill = Brushes.Yellow;
curr.Fill = Brushes.Red;
}
prev = curr;
}
Related
I've seen a few SO questions but I can't seem to figure out how to do this with my current setup.
My Datagrid contains this:
CellStyle="{StaticResource DataGridContentCellCentering}"
<Style x:Key="DataGridContentCellCentering" TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="{StaticResource PColour}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
<ContentPresenter HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{StaticResource PColour}"/>
<Setter Property="TextBlock.TextAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="15"/>
</Style>
I have a DataGridTextColumn in my datagrid
<DataGridTextColumn Header="{x:Static p:Resources.Sabel}" MinWidth="120"
x:Name="SName" Binding="{Binding SName}" Width="*"
EditingElementStyle="{StaticResource dataGridTextColumnLimit}"/>
Where my dataGridTextColumnLimit is this:
<Style x:Key="dataGridTextColumnLimit" TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="{StaticResource Balour}"/>
<Setter Property="MaxLength" Value="20"/>
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="TextAlignment" Value="Center"/>
</Style>
I want to somehow have a tooltip that shows the text content of the textbox when i hover over the cell. Is this possible/easy to do?
Thanks
Just bind the tooltip property to the data context of the cell.
<Style x:Key="DataGridContentCellCentering" TargetType="{x:Type DataGridCell}">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=DataContext}"/>
<Setter Property="Background" Value="{StaticResource PColour}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
<ContentPresenter HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{StaticResource PColour}"/>
<Setter Property="TextBlock.TextAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="15"/>
</Style>
I have "Save" button which has two states: invisible (when no changes) and visible: when some text changed.
So, I create XAML:
<Button x:Name="btnSaveText"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="0,0,1,0" Width="22" Height="22" Padding="0"
BorderBrush="#EFF4FA"
Background="#EFF4FA" IsEnabled="False"
Style="{StaticResource stlButton}">
<Image Source="/UI.Resources;component/PNGImages/Save.png"
Style="{StaticResource stlButtonImage}" />
</Button>
<Style TargetType="{x:Type Image}" x:Key="stlButtonImage">
<Setter Property="Margin" Value="1" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Stretch" Value="None" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="#EFF4FA"/>
</Trigger>
</Style.Triggers>
</Style>
But, when the button is disabled it looks like this:
How to make visible only button image?
Set the Buttons Background to Transparent :
<Setter Property="Background" Value="Transparent"/>
Full sample:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
If you also want to get rid of the Border you could link it to the Background that will make it invisible, too:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
i want to change color of thumb/scrollbox from RichTextBox.
I'm using, but it doesn't changes color of thumb
<RichTextBox x:Name="richTextBox" HorizontalAlignment="Left" Height="285" VerticalAlignment="Top" Width="880" VerticalScrollBarVisibility="Visible" IsReadOnly="True" Foreground="#FFA02626" Background="{x:Null}">
<RichTextBox.Resources>
<Style TargetType="ScrollBar">
<Setter Property="Foreground" Value="Red"/>
</Style>
</RichTextBox.Resources>
</RichTextBox>
I don't find any easy way to do this. But you can define your custom ScrollBar style.
Here is my example I just wrote. It's look so ugly because I'm going to bed.
<RichTextBox>
<RichTextBox.Resources>
<Style x:Key="ScrollThumb" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle x:Name="Rectangle1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Transparent" SnapsToDevicePixels="True"/>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="Rectangle1" Property="Width" Value="Auto" />
<Setter TargetName="Rectangle1" Property="Height" Value="7" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<Setter Property="Foreground" Value="Red" />
<Setter Property="Background" Value="DarkGray" />
<Setter Property="Width" Value="10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="19" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" />
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="true">
<Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter TargetName="GridRoot" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="12" />
<Setter TargetName="Thumb" Property="Tag" Value="Horizontal" />
<Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RichTextBox.Resources>
</RichTextBox>
You can improve it follow MS guide here : https://msdn.microsoft.com/en-us/library/ms742173(v=vs.110).aspx
Or here: https://www.google.com
Ok, i know my question might be super dumb- but i couldn't find the solution my self- so here i am- asking your help:
in wpf i have a DataGrid with different styles.
now, i need to set the tooltip max width.
this is my DataGridCell style:
<Style TargetType="DataGridCell" x:Key="MyDataGridCellStyle">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="DataGridCell_PreviewMouseLeftButtonDown" />
<EventSetter Event="PreviewTextInput" Handler="DataGridCell_PreviewTextInput" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="White" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},Path=Content.Text}"/>
</Style>
how do i add to the tooltip the max width style?
Try this please
Keep this code
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},Path=Content.Text}"/>
and add this to your datagrid
<DataGrid.Resources>
<Style TargetType="ToolTip">
<Setter Property="MaxWidth" Value="20" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}" >
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
Is what you tried to put your tooltip in a textblock
<Setter Property="ToolTip">
<Setter.Value>
<TextBlock MaxWidth="..." TextWrapping="Wrap" Text ="{Binding RelativeSource={RelativeSource Self},Path=Content.Text}"/>
</Setter.Value>
</Setter>
I want to create a template for a XAML WPF application.
I have two problems:
1) I have to set positione TabItem Header on top right of UserControl
2) I set TabItem Style, but when ouse go over tabItem Header, i see default Item effetcs on text.
<TabControl>
<TabItem Header="{DynamicResource tab_header_graphic_interface}" Style="{StaticResource generalTabItem}">
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" Name="scrDrvPan">
</ScrollViewer>
</TabItem>
<TabItem Header="{DynamicResource tab_header_list_view}" Style="{StaticResource generalTabItem}">
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" Name="scrDrvList">
</ScrollViewer>
</TabItem>
</TabControl>
And i set style for TabItem
<Grid.Resources>
<Style x:Key="generalTabItem" TargetType="{x:Type TabItem}">
<Setter Property="FontFamily" Value="/Font/#Futura Std Medium" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Height" Value="30" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<!--<DockPanel IsItemsHost="True" LastChildFill="False" Margin="2,2,2,0" HorizontalAlignment="Right">
</DockPanel>-->
<!--<ContentPresenter Content="{TemplateBinding Property=TabItem.Header}"/>-->
<TextBlock Background="Transparent" Text="ciao" />
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="TabItem.IsSelected" Value="True">
<Setter Property="FontFamily" Value="/Font/#Futura Std Bold" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Height" Value="30" />
</Trigger>
<Trigger Property="TabItem.IsFocused" Value="True">
<Setter Property="FontFamily" Value="/Font/#Futura Std Bold" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Height" Value="30" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
Have you tried this in your HeaderTemplate DataTemplate?`
<TextBlock Background="Transparent" Text="{Binding}" HorizontalAlignment="Right" VerticalAlignment="Top" />