I am working on a combo box with icons.This combo box consist of items which have a name and an icon with the respective type it belongs to.
While my attempt has been successful to a certain extent I am getting a string which says "System.Windows.DataTemplate" to where it's supposed to show the respective icon.
I feel like there is something wrong in the way that I am calling the content controller.
you should use DataTemplate resources to set ContentTemplate property, not Content
<ContentControl Content="{Binding}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type dc:ComboBoxItem}}, Path=DataContext, Converter={StaticResource FormBuilderClient_TypeOfConverter}}" Value="{x:Type models:FileSettingsModel}" >
<Setter Property="ContentTemplate" Value="{StaticResource FileIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type dc:ComboBoxItem}}, Path=DataContext, Converter={StaticResource FormBuilderClient_TypeOfConverter}}" Value="{x:Type models:ServerSettingsModel}" >
<Setter Property="ContentTemplate" Value="{StaticResource ServerIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type dc:ComboBoxItem}}, Path=DataContext, Converter={StaticResource FormBuilderClient_TypeOfConverter}}" Value="{x:Type models:HomeSettingsModel}" >
<Setter Property="ContentTemplate" Value="{StaticResource HomeIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
however it should be simpler to use DataTemplates for specific type, rather than x:Key. also define them in ComboBox resources.
<ComboBox.Resources >
<DataTemplate DataType="{x:Type models:FileSettingsModel}">
<Path Stretch="Uniform" Stroke="Black" Fill="Blue" Height="15" Width="25" Data="..."/>
</DataTemplate>
<DataTemplate DataType="{x:Type models:ServerSettingsModel}" >
<Path Stretch="Uniform" Stroke="Black" Fill="OrangeRed" Height="15" Width="25" Data="..."/>
</DataTemplate>
<DataTemplate DataType="{x:Type models:HomeSettingsModel}">
<Canvas>
<Path Canvas.Top="0" Canvas.Left="-2" Height="15" Width="25"
Stretch="Uniform" Stroke="Black" Fill="Green" Data="..."/>
<Path Canvas.Top="7" Canvas.Left="9" Height="16" Width="23"
Stretch="Uniform" Stroke="Black" Fill="Yellow" Data="..."/>
</Canvas>
</DataTemplate>
</ComboBox.Resources>
this way ContentControl should pick correct template without any triggers:
<ContentControl Content="{Binding}"/>
Related
I'm working with a telerik RadCartesianChart. And I'm supposed to show a tooltip which conveys the information about the series inide the chart (such as the date, the value, the title of the series). I was able to show the date and value which were already bound in the CategoryPath and the ValuePath of the chart respectively. But I have no clue how to show the title of the series which belongs to the same data source but not bound by either the CategoryPath or the ValuePath.
Below is what I have done so far.
<telerik:RadCartesianChart x:Name="chart" Margin="0,10,0,36" Width="auto" Grid.RowSpan="2">
<telerik:RadCartesianChart.Behaviors>
<telerik:ChartTooltipBehavior HorizontalOffset="-11" VerticalOffset="-50" />
</telerik:RadCartesianChart.Behaviors>
<telerik:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<Grid>
<Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="5" CornerRadius="3">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Category}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Value, StringFormat=\{0:N2\}}" />
</StackPanel>
</StackPanel>
</Border>
</Grid>
</DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:DateTimeCategoricalAxis
x:Name="datetimeAxis"
LabelFitMode="MultiLine"
LabelFormat="{Binding Tab.CurrentPoC.LabelFormat}"
LabelInterval="1"
LabelOffset="0"
LabelRotationAngle="270"
LabelStyle="{DynamicResource LabelStyle}"
LastLabelVisibility="Visible"
LineDashArray="1 1"
LineStroke="{DynamicResource CouleurTexte}"
LineThickness="1"
MajorTickInterval="1"
MajorTickLength="1"
PlotMode="OnTicks"
SmartLabelsMode="SmartStep"
TickThickness="5"
ZIndex="0" Height="5" />
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Foreground="White" LastLabelVisibility="Visible" HorizontalLocation="Right"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" />
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.Resources>
<Style x:Key="AxisLineStyle" TargetType="{x:Type telerik:LinearAxis}" >
<Setter Property="Foreground" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
<Setter Property="Background" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
</Style>
<DataTemplate x:Key="ellipseTemplate">
<Ellipse Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
</DataTemplate>
<DataTemplate x:Key="rectangleTemplate">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
<DataTemplate x:Key="triangleTemplate">
<Polygon Points="10,5 5,10 15,10 10,3" Stroke="GreenYellow" StrokeThickness="2" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
</DataTemplate>
<!--<DataTemplate x:Key="+Template">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
<DataTemplate x:Key="xTemplate">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>-->
<Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}">
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="Stroke" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.LineSeriesColor}" HorizontalLocation="Left"/>
</Setter.Value>
</Setter>
<Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
</Style>
<Style TargetType="telerik:BarSeries" BasedOn="{StaticResource BarSeriesStyle}">
<Setter Property="CombineMode" Value="Stack"/>
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="Gray" HorizontalLocation="Right"/>
</Setter.Value>
</Setter>
<Setter Property="PointTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="telerik:PointSeries" BasedOn="{StaticResource PointSeriesStyle}">
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.PointSeriesColor}" HorizontalLocation="Left" />
<!--Style="{DynamicResource AxisLineStyle}"-->
</Setter.Value>
</Setter>
<Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
</Style>
</telerik:RadCartesianChart.Resources>
<telerik:RadCartesianChart.SeriesProvider>
<telerik:ChartSeriesProvider Source="{Binding Tab.CurrentPoC.GraphsToDisplay, Mode=TwoWay}">
<telerik:ChartSeriesProvider.SeriesDescriptors>
<telerik:CategoricalSeriesDescriptor x:Name="CatSeries" CategoryPath="TimeStampX" ValuePath="ValueY" ItemsSourcePath="Data" TypePath="SerieType"/>
</telerik:ChartSeriesProvider.SeriesDescriptors>
</telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>
</telerik:RadCartesianChart>
To achieve your requirement, you can use the Presenter property of the DataPoint object.
The DataPoint object is the data context passed to the TooltipTemplate.
The Presenter is a property of DataPoint which holds a reference to the series object that hosts the concrete data point.
<telerik:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<TextBlock Text="{Binding Presenter.DataContext.MySeriesNameProperty}" />
</DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>
You can read a bit more about the DataPoint class in the RadChartView documentation.
I got it working by adding a new property called LegendName to the data source object. And changed the binding path like this <TextBlock Text="{Binding Path=DataItem.LegendName}"/>. Not sure whether this is the proper way but it's working as intended.
I have a code that allows you to create objects on the screen, there is a panel of buttons, clicking on the button you create an image / object on canvas, I can not get another image to be placed in Canvas so that several images can be displayed, link to a previously created question: WPF C # Display objects (2d Map)
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Canvas>
<Image x:Name="injWell" Source="/Resources/injectionWell.png"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="40" Height="40"
Stretch="Fill" StretchDirection="Both" IsHitTestVisible="False"/>
<Image x:Name="injWellNot" Source="/Resources/injectionWellNot.png"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="40" Height="40"
Stretch="Fill" StretchDirection="Both" IsHitTestVisible="False"/>
<TextBlock Canvas.Top="-20" Canvas.Left="-40" Width="100"
TextAlignment="Center" Text="{Binding Name}" FontWeight="Bold"
IsHitTestVisible="False"
Visibility="{Binding DataContext.ShowNames,
RelativeSource={RelativeSource FindAncestor, AncestorType=Window},
Converter={StaticResource BoolToVisibilityConverter}}"/>
<TextBlock Canvas.Left="30" Canvas.Top="10"
Text="{Binding X, StringFormat='{}X = {0}'}"
IsHitTestVisible="False"
Visibility="Collapsed" x:Name="XText"/>
<TextBlock Canvas.Left="30" Canvas.Top="25"
Text="{Binding Y, StringFormat='{}Y = {0}'}"
IsHitTestVisible="False"
Visibility="Collapsed" x:Name="YText"/>
</Canvas>
<ControlTemplate.Triggers>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="injWell" Property="Source" Value="/Resources/injectionWell.png"/>
<Setter TargetName="injWellNot" Property="Source" Value="/Resources/injectionWellNot.png"/>
</Trigger>
<DataTrigger Binding="{Binding DataContext.ShowAllCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True">
<Setter TargetName="XText" Property="Visibility" Value="Visible"/>
<Setter TargetName="YText" Property="Visibility" Value="Visible"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True"/>
<Condition Binding="{Binding DataContext.ShowCurrentCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="XText" Property="Visibility" Value="Visible"/>
<Setter TargetName="YText" Property="Visibility" Value="Visible"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</DataTemplate>
The key thing to realize here is that you need to render a list of items, and in MVVM you do that with an ItemsControl. (You could also use a ListView, but they implement additional functionality that you almost certainly wont want, like item selection etc). Ultimately you want all of your graphics objects to be displayed on a Canvas, so you need to override the ItemsPanel property and put one there inside a ItemsPanelTemplate. Each element then needs to be positioned on the Canvas, so you'll need to set the ItemContainerStyle and set the Canvas.Left and Canvas.Top properties there (a common mistake is to do it on the elements themselves, but they get placed into a container so you have to do it on that instead). Put all this together and you'll have something that looks like this:
<ItemsControl ItemsSource="{Binding MyGraphicsViewModels}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="Canvas.Left" Value="{Binding X}" />
<Setter Property="Canvas.Top" Value="{Binding Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
So MyGraphicsViewModels will typical be a list in your view model of some base class you've created (e.g. BaseGraphicsViewModel) and then you'll subclass that into all the different types of graphics items you want to draw. The final piece of the puzzle is to then add DataTemplates to specify how you want each of your view model types to be represented in the view:
<DataTemplate DataType="{x:Type vm:DerivedGraphicsObjectViewModel}">
<Rectangle Fill="Blue" Width="64" Height="64" />
</DataTemplate>
For a more comprehensive example, which uses Triggers instead of DataTemplates, check out my answer to this SO question from the past.
I want to change the ellipse fill color to green when the button is enabled.
<Button x:Name="btn_Kaart2" Grid.Column="1" Grid.Row="2" IsEnabled="False">
<Button.Template>
<ControlTemplate>
<Ellipse x:Name="ellipse_2"
Height="35"
Stroke="Black"
Fill="Red"
Margin="-300,440,0,0"/>
</ControlTemplate>
</Button.Template>
</Button>
Normally I would use ellipse_2.Fill = "Color" but that doesn't work, program can't find ellipse_2
You can use a databinding with RelativeSource to get this without any additional code
<Button x:Name="btn_Kaart2" Grid.Column="1" Grid.Row="2" IsEnabled="False">
<Button.Template>
<ControlTemplate>
<Ellipse x:Name="ellipse_2"
Height="35"
Margin="-300,440,0,0"
Stroke="Black">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType=Button}}" Value="false">
<Setter Property="Fill" Value="red"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType=Button}}" Value="true">
<Setter Property="Fill" Value="green"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
It's important that the Ellipse itself has no Fill attribute.
You can try this by changing the IsEnabled value in the *.xaml and the color should change immediately in the designer.
I am making diagram (with help of the google of course). Simple nice working diagram, but I have little issues.
When I have referenced to Canvas.Top everything works nice, just Y axis is upside down .. so Y is getting from 0 to positive when moving mouse down and I like it that positive/higher value is at top and 0 is at bottom. When I reference Canvas to Bottom my points/nodes works fine only connectors/lines are still reference to "top".
How to add also the connectors/lines to Canvas.Bottom referencing.
Here is my XAML code:
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
<CompositeCollection x:Key="DiagramCol">
<CollectionContainer Collection="{Binding DataContext.DiagramConnectors, Source={x:Reference diagramview}}"/>
<CollectionContainer Collection="{Binding DataContext.DiagramNodes, Source={x:Reference diagramview}}"/>
</CompositeCollection>
<!--NODES-->
<DataTemplate DataType="{x:Type local:DiagramNode}">
<Canvas Name="dragTarget">
<Thumb DragDelta="Thumb_Drag" DragStarted="Thumb_DragStarted" DragCompleted="Thumb_DragCompleted">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Canvas Margin="-10,-10,10,10">
<Ellipse Height="17" Width="17" Stroke="Black" StrokeThickness="1" Fill="Yellow"
x:Name="Ellipse"/>
<TextBlock Canvas.Top="-20" Canvas.Left="-40" Width="100"
TextAlignment="Center" Text="{Binding Name}" FontWeight="Bold"
IsHitTestVisible="False"
Visibility="{Binding DataContext.ShowNames,
RelativeSource={RelativeSource FindAncestor, AncestorType=Window},
Converter={StaticResource BoolToVisibilityConverter}}"/>
<TextBlock Canvas.Left="30" Canvas.Top="10"
Text="{Binding X, StringFormat='{}X = {0}'}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="XText"/>
<TextBlock Canvas.Left="30" Canvas.Top="25"
Text="{Binding Xmeaning}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="timeText"/>
<TextBlock Canvas.Left="30" Canvas.Top="40"
Text="{Binding Y, StringFormat='{}Y = {0}'}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="YText"/>
<TextBlock Canvas.Left="30" Canvas.Top="55"
Text="{Binding Ymeaning}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="luxText"/>
</Canvas>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
<Setter TargetName="Ellipse" Property="Fill" Value="Red"/>
</DataTrigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="Ellipse" Property="Fill" Value="Green"/>
</Trigger>
<DataTrigger Binding="{Binding DataContext.ShowAllCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True">
<Setter TargetName="XText" Property="Visibility" Value="Visible"/>
<Setter TargetName="YText" Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding }" Value="True">
<Setter TargetName="Ellipse" Property="StrokeThickness" Value="2"/>
<Setter TargetName="Ellipse" Property="Stroke" Value="Red"/>
<Setter TargetName="Ellipse" Property="Fill" Value="White"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True"/>
<Condition Binding="{Binding DataContext.ShowCurrentCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="XText" Property="Visibility" Value="Visible"/>
<Setter TargetName="YText" Property="Visibility" Value="Visible"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
</DataTemplate>
<!--CONNECTORS-->
<DataTemplate DataType="{x:Type local:DiagramConnector}">
<Line Stroke="OrangeRed" StrokeThickness="3"
X1="{Binding Start.X}" Y1="{Binding Start.Y}"
X2="{Binding End.X}" Y2="{Binding End.Y}" x:Name="Line"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Start}" Value="{x:Null}">
<Setter TargetName="Line" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Grid.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Name="column1" Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Name="row1" Height="*"/>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Margin="2" x:Name="tbTitle" Grid.Column="1" Grid.Row="0" RenderTransformOrigin="0.5,0.5" FontSize="14" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center" Text="{Binding GraphAddress}"/>
<TextBlock Margin="2" x:Name="tbXlabel" Grid.Column="1" Grid.Row="3" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="{Binding Xlabellabel}" />
<TextBlock Margin="2" x:Name="tbYlabelLeft" Grid.Column="0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="{Binding Ylabelleftlabel}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
<TextBlock Margin="2" x:Name="tbYlabelRight" Grid.Column="2" Grid.Row="1" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="{Binding Ylabelrightlabel}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
<ListBox SelectedItem="{Binding SelectedObject}"
PreviewMouseMove="ListBox_PreviewMouseMove"
PreviewMouseDown="ListBox_PreviewMouseDown"
PreviewMouseRightButtonDown="ListBox_PreviewMouseRightButtonDown"
PreviewMouseLeftButtonDown="ListBox_PreviewLeftMouseDown"
Margin="10,10,10,10"
Grid.Column="1"
Grid.Row="1"
x:Name="LstBox">
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile"
Viewport="0,0,36,36" ViewportUnits="Absolute"
Viewbox="0,0,20,20" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="Darkgray" StrokeThickness="0.5" Height="24" Width="24"
StrokeDashArray="5 3"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<ItemsPresenter/>
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsSource>
<StaticResource ResourceKey="DiagramCol"/>
</ListBox.ItemsSource>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True" Background="#01FFFFFF"
Height="{Binding AreaHeight}" Width="{Binding AreaWidth}"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyFocusVisualStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter x:Name="Content"/>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Content" Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Gray" ShadowDepth="4" BlurRadius="10"/>
</Setter.Value>
</Setter>
</Trigger>
<DataTrigger Binding="{Binding IsNew}" Value="True">
<Setter Property="Opacity" Value=".5"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Grid>
So when I reference this line:
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
To:
<Setter Property="Canvas.Bottom" Value="{Binding Y}"/>
then points/nodes works fine. Only the lines are the issue. In the code I like to add datatemplate of line to canvas bottom referencing, but how?
Please help. If any question please ask and if anything missing what you need, please say :)
I have the following definition of a UserControl
<UserControl x:Class="Logger.View.AdvancedToggleButton"
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:converter="clr-namespace:Logger.Converter"
xmlns:commonControls="clr-namespace:Logger.CommonControls"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<UserControl.Resources>
<converter:CountToVisibilityConverter x:Key="CountToVisibilityConverter" />
</UserControl.Resources>
<ItemsControl ItemsSource="{Binding LogElements, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.Resources>
<Style TargetType="{x:Type ToggleButton}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="container"
BorderThickness="1" Margin="1,2,1,1" Padding="2,2,4,2" BorderBrush="Black">
<ContentPresenter x:Name="contentPresenter" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TargetName="container" Value="{Binding SelectionBrush, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
<Setter Property="BorderThickness" TargetName="container" Value="1,1,1,0"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" TargetName="container" Value="{Binding SelectionBrush, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
<Setter Property="Background" Value="{Binding SelectionBrush, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ToggleButton Margin="2,1"
IsChecked="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Command="{Binding DataContext.ToggleCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"
CommandParameter="{Binding}">
<ToggleButton.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="4,0,5,0" x:Name="tbText"/>
<Border Grid.Column="1" Margin="0,-1,-3,-1" MinWidth="20"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Background="Yellow" BorderBrush="LightGray" BorderThickness="1,0,0,0"
Visibility="{Binding WarningCount, Converter={StaticResource CountToVisibilityConverter}}"
Cursor="Hand">
<commonControls:ActionLink HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding WarningCount}"
FontFamily="Consolas" Margin="2,0" Command="{Binding DataContext.NavigateToWarningCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
</Border>
<Border Grid.Column="2" Margin="3,-1,-3,-1" MinWidth="20"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Background="Red" BorderBrush="LightGray" BorderThickness="1,0,0,0"
Visibility="{Binding ErrorCount, Converter={StaticResource CountToVisibilityConverter}}"
Cursor="Hand" >
<commonControls:ActionLink HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ErrorCount}"
FontFamily="Consolas" Foreground="White" Margin="2,0" />
</Border>
</Grid>
</ToggleButton.Content>
</ToggleButton>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</UserControl>
Everything just works fine. Now I've added another Property to this UserControl to set the BackgroundColor of the Checked ToggleButton-TextBlock (tbText) to a given SolidColorBrush.
My problem now is, that I have no idea how to correctly set the Trigger for this.
I tried to add the Trigger to the ControlTemplate.Triggers when the IsChecked is True. But I don't know how to access tbText from this point. Is this the correct location for the Trigger or do I have to add another Trigger at a lower level?
Your ToggleButton.IsChecked property is data bound to your IsSelected property so by default, you also want to set the TextBlock.Background when this IsSelected property is true. You can do that like this:
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="4,0,5,0"
x:Name="tbText">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="{Binding YourColourBrush,
RelativeSource={RelativeSource AncestorType={x:Type
YourPrefix:YourUserControl}}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
Alternatively, you could just data bind directly to the ToggleButton.IsChecked property like this:
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="4,0,5,0"
x:Name="tbText">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource
AncestorType={x:Type ToggleButton}}}" Value="True">
<Setter Property="Background" Value="{Binding YourColourBrush,
RelativeSource={RelativeSource AncestorType={x:Type
YourPrefix:YourUserControl}}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>