I'm working with multiple time-series chart based on WPF toolkit. For example time-series of temperature, dewpoint and pressure in one chart
I need to share tooltips to show at each datapoint a summary of the meteorlogical parameters at a certain date/time in a little tooltip frame.
If anyone know if it is possible and how to do that, it would be great.
Thanks,
PY
Look up Styles for the DataPoints of your Series i've got one example for BubbleDataSeries:
<Style x:Key="BubbleToolTipTemplate" TargetType="{x:Type c:BubbleDataPoint}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="c:BubbleDataPoint">
<Grid>
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" />
<ContentPresenter Content="{TemplateBinding Size}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content ="{TemplateBinding DependentValue, Converter={StaticResource DoubleToStringConverter}}" />
<ContentControl Content ="{TemplateBinding IndependentValue}"/>
<ContentControl Content ="{TemplateBinding Size}" />
</StackPanel>
</ToolTipService.ToolTip>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I am watching an online video tutorial about DataTemplates
The demo code is the follows
<StackPanel.Resources>
<ControlTemplate x:Key="MyButton">
<Grid>
<Ellipse Fill="{TemplateBinding Background}" />
<ContentControl Content="{TemplateBinding ContentControl.Content}" /><!--why this-->
</Grid>
</ControlTemplate>
</StackPanel.Resources>
<Button Content="Click me" Background="Green" Width="100" Height="50" Template="{StaticResource MyButton}" />
</StackPanel>
The bit where I'm lost is
<ContentControl Content="{TemplateBinding ContentControl.Content}" />
Why is it ControlControl.Content and not just Content. If we review the line of code before this it shows Ellipse Fill="{TemplateBinding Background}" and not <Ellipse Fill="{TemplateBinding Ellipse.Background}" />
Why do we state ContentControl? Is it because the property Content of the Button is actually an object of type ContentControl where as Background is just a string property of Button?
If you specify the type of the ControlTemplate (also the same for Style), then the compiler will know what object to look at to find the Content property:
<ControlTemplate x:Key="MyButton" TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}" />
<ContentControl Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
If you don't specify the type, the compiler will require you to enter the type in the TemplateBinding path as you have.
However, sometimes you can also specify which base class a property is from as in this case, because the Content property is actually inherited in the Button Class from the ContentControl class... you can see this by clicking on the Content property in the Button Class page on MSDN, which will take you to the ContentControl.Content Property page.
You should find that in this case, you could also use Button.Content as the property is inherited in the Button Class. Therefore, to answer your question, you don't actually need to use ContentControl.Content... you have a choice.
UPDATE >>>
You can do that with Styles, but with ControlTemplates, you'd have to make sure that the objects that you apply it to also have the same base class and all properties used in the ControlTemplate. Theoretically, you could then do this:
<ControlTemplate x:Key="MyButton" TargetType="{x:Type ContentControl}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}" />
<ContentControl Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
...
<RadioButton Template="{StaticResource MyButton}" Content="Hey" />
However, I imagine that you actually need to use a ContentPresenter instead of the ContentControl:
<ControlTemplate x:Key="MyButton" TargetType="{x:Type ContentControl}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}" />
<ContentPresenter />
</Grid>
</ControlTemplate>
You may also like to read the What's the difference between ContentControl and ContentPresenter? page here on Stack Overflow.
If I replace a ScrollViewer control template so that it contains another scroll viewer then some of the time they scroll together.
For example the GridView class has a variation on the following template which ensures that the column headers always line up with the contents of the list view, even when the user scrolls to the right (in this sample "Columns" is a GridViewColumnCollection filled with columns)
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ScrollViewer.Style>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<DockPanel>
<ScrollViewer DockPanel.Dock="Top">
<GridViewHeaderRowPresenter Columns="{StaticResource Columns}" />
</ScrollViewer>
<ScrollBar DockPanel.Dock="Bottom" Name="PART_HorizontalScrollBar" Orientation="Horizontal"
Minimum="0.0" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}"
Value="{Binding Path=HorizontalOffset,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay}" />
<ScrollContentPresenter Name="PART_ScrollContentPresenter" Content="{TemplateBinding Content}" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ScrollViewer.Style>
<GridViewHeaderRowPresenter Columns="{StaticResource Columns}" />
</ScrollViewer>
How does this work?
(I'm asking because I need to modify the GridView templates and I've managed to break this functionality - I'm trying to work out how to fix it but finding it difficult because I don't understand why it works in the first place!)
I have a HeaderedContentControl that contains a TreeView.
<HeaderedContentControl Header="Steps" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TreeView Name="WizardSteps" ItemsSource="{Binding WizardSteps}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<!-- Hierarchical data templates here -->
</TreeView>
</HeaderedContentControl>
Although the HeaderedContentControl stretches to fill the area inside its parent grid, my TreeView control only occupies a small portion of the space available.
How do I get my TreeView to expand to fill the content area of my HeaderedContentControl?
The default control template for HeaderedContentControl is something like this:
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel>
<ContentPresenter ContentSource="Header" />
<ContentPresenter />
</StackPanel>
</ControlTemplate>
The StackPanel lets each child have its own desired height, so the TreeView won't stretch. You could replace it with a template that uses a DockPanel:
<HeaderedContentControl Header="Steps" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" >
<HeaderedContentControl.Template>
<ControlTemplate TargetType="HeaderedContentControl">
<DockPanel>
<ContentPresenter DockPanel.Dock="Top" ContentSource="Header" />
<ContentPresenter />
</DockPanel>
</ControlTemplate>
</HeaderedContentControl.Template>
If you want to make it more reusable, set the template in a Style and use VerticalContentAlignment:
<Style TargetType="HeaderedContentControl">
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HeaderedContentControl">
<DockPanel>
<ContentPresenter DockPanel.Dock="Top" ContentSource="Header" />
<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
That way, all your HeaderedContentControls will have their content fill by default, and you can override that by setting VerticalContentAlignment on an individual control.
Alternately, you could use a DockPanel directly instead of a HeaderedContentControl.
I'm using Silverlight 4 + Silverlight 4 Toolkit (April 2010). I'd like to display the dependent value of my pie chart in the chart legend. I've tried styling the legend item however I do not know how to bind to the dependent value.
Many thanks,
Keith
<Style x:Key="LegendItemStyle" TargetType="toolkit:LegendItem">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:LegendItem">
<StackPanel Orientation="Horizontal">
<Rectangle Width="8" Height="8" Fill="{Binding Background}"
Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0" />
<!-- MY VALUE HERE -->
<visualizationToolkit:Title Content="{TemplateBinding Content}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I needed to do the same thing and found on this site, http://forums.silverlight.net/forums/p/91586/326235.aspx, that you can use the data context binding instead of the template binding.
The below applies to the section where you placed a comment
<!-- MY VALUE HERE -->
Instead of doing something like
<TextBlock Text="{Binding ActualDependentValue}" />
or
<TextBlock Text="{Binding ActualIndependentValue}" />
find the property that you used in the series to bind to and replace it with something like
<TextBlock
Text="{Binding PropertyNameOfIndependentOrDependentValue}"
DataContext="{Binding DataContext}"
/>
Wpf dropshadow disappears.
Here is how to reproduce.
Type the following in xaml pad.
<Page.Resources>
<DropShadowEffect x:Key="shadow"
Opacity="1"
ShadowDepth="1"
Color="Blue"
BlurRadius="30"/>
</Page.Resources>
<Grid>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd"
BorderBrush="Black" BorderThickness="1"
Background="Yellow"
CornerRadius="8"
Effect="{StaticResource shadow}">
<TextBlock Text="Hello out there" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
You should see some text with a border abound it, and a drop shadow around the border.
Now change the Margin="0,0,0,0" to Margin="0,300,0,0", and size your xaml pad window so you can see the border. On my machine, the drop shadow is now gone.
Anyone else see this? Please help.
I wish I had a good explanation for you, but there were some weird things in your XAML that I played with and I think I have a solution for you.
If you use a Grid, most likely you want to lay out a specific number of rows and columns. You should specify those. This doesn't affect your problem, however.
Likewise, you should specify the Row and Column for your element because you'll eventually need to put this information in your XAML anyway. It's a good habit to start with IMO.
The problem that I can't explain is with the combination of HorizontalAlignment and VerticalAlignment. When you put the Button in the Grid, I would expect the Button to take up the entire space, but it doesn't. The only way you can make this work as far as I could figure out was to specify Height and Width. If you do this, the Effect will work. I found that the threshold in your original XML was a total Y margin of 239. For example, if you used 0,239,0,0, it would fail. If you used 0,139,0,100, it would also fail because the sum is 239. Weird stuff.
Here's my XAML that works:
<Page.Resources>
<DropShadowEffect x:Key="shadow"
Opacity="1"
ShadowDepth="2"
Color="Blue"
BlurRadius="30"/>
</Page.Resources>
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Width="90" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,300,0,0" Grid.Row="0" Grid.Column="0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd"
BorderBrush="Black" BorderThickness="1"
Background="Yellow"
CornerRadius="8"
Effect="{StaticResource shadow}">
<TextBlock Text="Hello out there" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
EDIT The OP does not want to specify a size for the Button because the Content of the Button can change dynamically. It turns out that if you set the MinHeight to something like 18 (I think this is reasonable for most content), the dropshadow effect will work again.
<Border x:Name="Bd" BorderBrush="Black" BorderThickness="1" Background="Yellow" CornerRadius="8" Effect="{StaticResource shadow}" MinHeight="18">
<StackPanel Orientation="Vertical">
<TextBlock>hi</TextBlock>
<TextBlock>there</TextBlock>
</StackPanel>
</Border>