I am using WPF component in my project in which there is a feature of creating rectangles with the input given as a list containing <x,y> for aligning rectangle over a canvas. I have given 0.5 stroke thickness to the rectangle but not any margin or border between the plotting but still these rectangles are not aligning smoothly , you can see the image attached.
enter image description here
Code
<ItemsControl ItemsSource="{Binding RectangleData}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="{Binding ActualHeight, ElementName=8}"
Width="{Binding ActualWidth, ElementName=myPlotRect}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Style>
<Style>
<Setter Property="Canvas.Right" Value="0"/>
<Setter Property="Canvas.Bottom" Value="0"/>
</Style>
</ItemsControl.Style>
<ItemsControl.ItemContainerStyle >
<Style>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="plotLineViewModel:RectangleDataType">
<Canvas Height="{Binding ActualHeight, ElementName=PlotArea}">
<Rectangle Fill= "Blue"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Opacity=".6" Stroke="Grey" StrokeThickness="0.5"
Height ="{Binding Path=ActualHeight, ElementName=RectangleData}">
<Canvas.Left>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="RectangleData" />
<Binding Path="Location.X" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Canvas.Left>
<Rectangle.Width>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="RectangleData" />
<Binding Path="Width" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition" />
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
Here below i am trying stackpanel approach but the gaps are not coming properly?
enter image description here
enter image description here
Below is the code with StackPanel:
<ItemsControl.ItemTemplate>
<DataTemplate DataType="plotLineViewModel:HighLightRectType">
<StackPanel Orientation="Horizontal" Height="{Binding ActualHeight, ElementName=PlotArea}">
<!--<TextBlock Name="TextBlock1" TextAlignment="Center" Style="{StaticResource AxisValueStyle}" Text="{Binding Path=Label}" >
<Canvas.Left>
<MultiBinding Converter="{StaticResource HighlightRectTextPositionCalculator}" >
<Binding Path="Label" />
<Binding Path="Width" />
<Binding Path="Location.X" />
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Canvas.Left>
<Canvas.Top>-30</Canvas.Top>
</TextBlock>-->
<StackPanel.Margin>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="Location.X" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}" Path="DataContext.IsScalingRequired" />
</MultiBinding>
</StackPanel.Margin>
<Rectangle Fill= "{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.FrameOverlayColor}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Opacity=".6"
Height ="{Binding Path=ActualHeight, ElementName=myPlotRectangle}">
<!--<Canvas.Left>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="Location.X" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Canvas.Left>-->
<Rectangle.Width>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="Width" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition" />
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
I am trying to change the foreground (text) color of one of the items in a ListBox based on an index value. For example, if the index was 1, then the item at index 1 would have a different text color than all the other items. The index isn't the list selection index but my own value.
I searched around on Google and found some ideas to use AlternationIndex but I can't get it to work that. The converter is either receiving 0 (zero) or DependencyProperty#Unset for the AlternationIndex binding.
Here is my code:
<ListBox x:Name="videoList" SelectionMode="Single" AlternationCount="{Binding Mode=OneWay, Path=Items.Count}" Grid.Column="1" SelectionChanged="videoList_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Mode="OneWay" Converter="{StaticResource EqualityConverter}">
<MultiBinding.Bindings>
<Binding ElementName="videoWindow" Mode="OneWay" Path="VideoIndex" />
<Binding RelativeSource="{RelativeSource AncestorType=ListBoxItem}" Path="(ItemsControl.AlternationIndex)" />
</MultiBinding.Bindings>
</MultiBinding>
</DataTrigger.Binding>
<DataTrigger.Setters>
<Setter Property="Foreground" Value="Blue" />
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
For the RelativeSource I've tried: Self, TemplatedParent and AncestorType=ListBoxItem.
I also tried lots of different combinations with the Path value.
I can't get it to work. Any suggestions?
Solution: With the help from Clemens, turns out it was because the binding for the ListBox AlternationCount was incorrect. Oops!
<ListBox x:Name="videoList"
SelectionMode="Single"
AlternationCount="{Binding RelativeSource={RelativeSource Self}, Mode=OneWay, Path=Items.Count}"
Grid.Column="1"
SelectionChanged="videoList_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Mode="OneWay" Converter="{StaticResource EqualityConverter}">
<MultiBinding.Bindings>
<Binding ElementName="videoWindow" Mode="OneWay" Path="VideoIndex" />
<Binding RelativeSource="{RelativeSource Self}" Path="(ItemsControl.AlternationIndex)" />
</MultiBinding.Bindings>
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="Foreground" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
It works with RelativeSource Self and a large enough AlternationCount, e.g. int.MaxValue.
<ListBox AlternationCount="2147483647" ...>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource EqualityConverter}">
<MultiBinding.Bindings>
<Binding ElementName="videoWindow"
Path="VideoIndex"/>
<Binding RelativeSource="{RelativeSource Self}"
Path="(ItemsControl.AlternationIndex)"/>
</MultiBinding.Bindings>
</MultiBinding>
</DataTrigger.Binding>
<DataTrigger.Setters>
<Setter Property="Foreground" Value="Blue"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I am arranging few textblocks in a canvas based on it's locations. sample code snippet is provided below at bottom. For this process I need to access each textblock's Actualwidth and Actual Height inside ItemContainerStyle. I am struggling to access it's properties as below by element name, because it doesn't have a name. How to do it? Do I need to do through templates?
<MultiBinding Converter="{StaticResource BPositionConverter}" ConverterParameter="Left">
<Binding ElementName="TextBlock" Path="ActualHeight" /> <---Problem
<Binding ElementName="TextBlock" Path="ActualWidth" /> <---Problem
</MultiBinding>
--Full snippet
<ItemsControl ItemsSource="{Binding Locations}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="Point">
<TextBlock Text="{Binding}" Width="40" Height="20" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left">
<Setter.Value>
<MultiBinding Converter="{StaticResource BPositionConverter}" ConverterParameter="Left">
<Binding ElementName="TextBlock" Path="ActualHeight" /> <---Problem
<Binding ElementName="TextBlock" Path="ActualWidth" /> <---Problem
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
Since your data template consist of a single text element you can refer to self to get the actual width and height for the same
so remove the ElementName and apply RelativeSource, should work with this trick
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left">
<Setter.Value>
<MultiBinding Converter="{StaticResource BPositionConverter}"
ConverterParameter="Left">
<Binding Path="ActualHeight"
RelativeSource="{RelativeSource Self}" />
<Binding Path="ActualWidth"
RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
I have a scenario where I'm passing in the same values to a multivalue converter for different buttons within a data template which all works fine. But was wondering way to make the code better by removing the repeatable elements, since I'm passing in the same content into
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
Code:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comments.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
<telerik:RadButton Margin="2" Command="{Binding DataContext.AddCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="AddCommentDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comment-Add.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewBreaksCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewBreaksDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Folder-Bug.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
</StackPanel>
</DataTemplate>
Basically there are two quite simple approaches to this.
Option 1 - bind to other property.
You can set your binding (multibinding actually) on some other dependency property, and then bind your buttons visibility to that property. If you don't have any good candidate for such property, you can use some simple object with single dependency property placed in the Resources collection. Here is the code of the class for such object:
public class VisibilityValueHolder : ValueHolder<Visibility> { }
public abstract class ValueHolder<T> : DependencyObject
{
public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
"Value", typeof(T), typeof(ValueHolder<T>), null);
public T Value
{
get { return (T)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
public ValueHolder() { }
public ValueHolder(T value)
{
Value = value;
}
}
And the usage in your code:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<common:VisibilityValueHolder x:Key="VisibilityHolder">
<common:VisibilityValueHolder.Value>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</common:VisibilityValueHolder.Value>
</common:VisibilityValueHolder.Value>
</StackPanel.Resources>
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}"
Visibility={Binding Value, Source={StaticResource VisibilityHolder}}>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comments.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
Option 2 - use Style with binding in the Setter
You can either declare implicit or explicit style (in case when you want to apply the same visibility to all your buttons, or just to the selected ones).
Your code would look like this:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="telerik:RadButton">
<Setter Property="Visibility">
<Setter.Value>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comments.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
In my application, i have tried to implement tooltip wich will show me some errors in the datagrid based on the dataGrid Column's text. For sample I have 4 columns with text-boxes for entering some data and if data in the some column doesn't much the rule or if some of them are empty on the last 4th column i should show tooltip with some explanation text.
<WpfToolkit:DataGridTemplateColumn Width="0.02*" IsReadOnly="True">
<WpfToolkit:DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type WpfToolkit:DataGridCell}" BasedOn="{StaticResource TransparentCellSelection}">
<Style.Triggers>
<DataTrigger Value="1">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource DataGridRowToolTipConverter}">
<Binding Path="IsRequired" />
<Binding Path="InputColumns.Count" />
<Binding Path="HasDefaultValue" />
<Binding Path="HasOverwritingValue" />
<Binding Path="MappingType" />
<Binding Path="SourceColumnMappings" />
<Binding Path="ColumnStatus" />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="ToolTip" Value="Translation mapping is incomplete." />
</DataTrigger>
<DataTrigger Value="2">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource DataGridRowToolTipConverter}">
<Binding Path="IsRequired" />
<Binding Path="InputColumns.Count"/>
<Binding Path="HasDefaultValue" />
<Binding Path="HasOverwritingValue" />
<Binding Path="MappingType" />
<Binding Path="SourceColumnMappings" />
<Binding Path="ColumnStatus" />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="ToolTip" Value="Overwriting Value overrides Mapping. Mapping and Default Value are ignored." />
</DataTrigger>
<DataTrigger Value="3">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource DataGridRowToolTipConverter}">
<Binding Path="IsRequired" />
<Binding Path="InputColumns.Count" />
<Binding Path="HasDefaultValue" />
<Binding Path="HasOverwritingValue" />
<Binding Path="MappingType" />
<Binding Path="SourceColumnMappings" />
<Binding Path="ColumnStatus" />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="ToolTip" Value="Default Value cannot be set for empty Mapping. Please define Mapping or use Overwriting Value instead of Default Value." />
</DataTrigger>
Does anybody know best way to do it?