I need help to populate canvas with rectangle and textblock
So far i am able to populate the canvas with rectangle using Mouse and using MVVM thanks to this post
https://stackoverflow.com/questions/22324359/add-n-rectangles-to-canvas-with-mvvm-in-wpf
But I need to add TextBlock for each drawn rectangle
this is what it should look like
Look alike of the application i want to create
This is my XAML code
<ItemsControl ItemsSource="{Binding RectItems, Source={x:Static VM:VMDrawing.instance}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas x:Name="canvas" Background="Transparent" Height="{Binding ElementName=image, Path=ActualHeight}" Width="{Binding ElementName=image, Path=ActualWidth}" >
<dxmvvm:Interaction.Behaviors>
<dxmvvm:EventToCommand EventName="MouseDown" Command="{Binding MouseDownCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" EventArgsConverter="{StaticResource MDC}"/>
<dxmvvm:EventToCommand EventName="MouseMove" Command="{Binding MouseMoveCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" EventArgsConverter="{StaticResource MMC}"/>
<dxmvvm:EventToCommand EventName="MouseUp" Command="{Binding MouseUpCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" />
<dxmvvm:EventToCommand EventName="PreviewMouseLeftButtonDown" Command="{Binding PreviewMouseLeftButtonDownCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" EventArgsConverter="{StaticResource PMLBDC}"/>
<dxmvvm:EventToCommand EventName="PreviewMouseLeftButtonUp" Command="{Binding PreviewMouseLeftButtonUpCommand, Source={x:Static VM:VMDrawing.instance}}" />
</dxmvvm:Interaction.Behaviors>
<Canvas.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding zoomValue, Source={x:Static VM:VMZoom.instance}}" ScaleY="{Binding zoomValue, Source={x:Static VM:VMZoom.instance}}"/>
</TransformGroup>
</Canvas.LayoutTransform>
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
<TextBlock Text="Sample Text" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I tried adding
<StackPanel>
<Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
<TextBlock Text="Sample Text" Width="100" Height="100"/>
</StackPanel>
Just to check if it will populate textblock for each rectangle. But it doesn't show any textblock. Does my understanding is wrong?
that this code
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
will set the position of each control in the canvas?
Update: It's working now. I forgot the fontsize of the TextBlock.
But how can i set the position of the TextBlock for each rectangle if the coordinates is from the
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
which I need in my Rectangle?
this is what my application look like now. But i need those textblock inside the rectangle not outside
enter image description here
Thank you so much
You are using a Stackpanel to display the Rectangle and the TextBlock... so the Rectangle and the TextBlock are stacked!
Use a Grid or a Canvas instead. Then you will be able to manage the position of your controls relatively to their container.
<Grid>
<Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
<TextBlock Text="Sample Text" Width="100" Height="100"/>
</Grid>
<Canvas>
<Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
<TextBlock Text="Sample Text" Width="100" Height="100" Canvas.Left="50" Canvas.Top="50"/>
</Canvas>
Related
I have a grid that contains dynamically created buttons.
I have a selector tool that will select a "rectangle" of buttons and do whatever on them.
I'm stuck at this point, because I'm going down the MVVM route.. but I previously had a list of all the buttons and would do:
var buttonPos = button.TransformToAncestor(someGrid).Transform(new Point(0, 0));
Now I do not have the luxury of being able to get all the buttons in my itemscontrol to do that (or at least I don't know how).
This is a section of my XAML.
<Grid Name="mainGrid" DockPanel.Dock="Left" MouseDown="MainGrid_MouseDown" MouseUp="MainGrid_MouseUp" MouseMove="MainGrid_MouseMove" Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="{Binding GridWidth}" Height="{Binding GridHeight}">
<ItemsControl x:Name="ObjItemControl" ItemsSource="{Binding ObjCompositeCollection}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Name="objGrid" Grid.Row="1"
Width="{Binding MinWidth, ElementName=mainGrid}"
Height="{Binding Height, ElementName=mainGrid}"
engine:GridHelper.RowCount="{Binding RowCount}"
engine:GridHelper.ColumnCount="{Binding ColumnCount}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type engine:ObjA}">
<ToggleButton Content="{Binding Id}"
Tag="{Binding Id}"
IsChecked="{Binding IsSelected}"
Height="{Binding ElementName=ObjItemControl,
Path=DataContext.ButtonHeightWidth}"
Width="{Binding ElementName=ObjItemControl,
Path=DataContext.ButtonHeightWidth}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{Binding ElementName=wellPlateItemControl,
Path=DataContext.ButtonMarginToUse}"
Padding="2"
PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"
PreviewMouseLeftButtonUp="Button_PreviewMouseLeftButtonUp"
MouseEnter="Button_MouseEnter"
MouseLeave="Button_MouseLeave"
Style="{StaticResource ObjButton}">
</ToggleButton>
</DataTemplate>
<DataTemplate DataType="{x:Type engine:GridLabeller}">
<TextBlock Text="{Binding HeaderName}" Style="{StaticResource GridHeaders}"/>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
<ItemsControl ItemsSource="{Binding RectForMarquee}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}"
Visibility="{Binding Visibility}"
Stroke="{StaticResource ResourceKey=SecondaryThemeColour}"
StrokeThickness="2" StrokeDashArray="2,1"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--<Canvas>
<Rectangle x:Name="selectionBox" Visibility="Collapsed" Stroke="{StaticResource ResourceKey=SecondaryThemeColour}" StrokeThickness="2" StrokeDashArray="2,1"/>
</Canvas>-->
</Grid>
I want to be able to get all of the ObjA toggle buttons and do that TransformToAncestor check... unless there is a better way?
I can also do this in the View code-behind but not sure if this is a bit naughty...
private void MainGrid_MouseUp(object sender, MouseButtonEventArgs e)
{
// Need to find a better way for this...
List<UIElement> tgInItemControl = new List<UIElement>();
foreach (var toggleButton in VisualHelperExtensions.FindVisualChildren<ToggleButton>(ObjItemControl))
{
tgInItemControl.Add(toggleButton);
}
viewModel.MainGrid_MouseUp(tgInItemControl, e);
}
Maybe this is a stupid asking, but I just wonder how to design this kind of layout:
first of all, I have a MenuList ObservableCollection. So I have to put these menus in to a stackPanel like this:
<Window.Resources>
<DataTemplate x:Key="MenuItemTemplate">
<Button Content="{Binding ContentText}" Panel.ZIndex="{Binding PIndex}" Padding="10" FontSize="20"/>
</DataTemplate>
</Window.Resources>
<ItemsControl ItemsSource="{Binding Menus}" ItemTemplate="{StaticResource MenuItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
so it looks like this:
after a while, there's a new bar under this menu added in:
<ItemsControl ItemsSource="{Binding Menus}" ItemTemplate="{StaticResource MenuItemTemplate}">
.......
</ItemsControl>
<Border Background="Green" VerticalAlignment="Top" Panel.ZIndex="10" Height="30" Margin="0,81,0,0"/>
Now it's look like this:
The requirment is, if a button selected, it should on the top of the bar, other unselected buttons should be covered by the bar:
But the buttons' are in a StackPanel, so they're all based on StackPanel's ZIndex.
My question is, how to design such layout in xaml?
I think using the renderTransform is better. No need to hard code PIndex in xaml. See below.
<DataTemplate x:Key="MenuItemTemplate">
<Button Content="{Binding}" Padding="10" FontSize="20" Height="30" Width="100">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1.2"></ScaleTransform>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DataTemplate>
<Border Background="Green" VerticalAlignment="Top" Height="30" Margin="0,150,0,0"/>
<ItemsControl ItemsSource="{Binding Menus}" ItemTemplate="{StaticResource MenuItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Code behind:
public ObservableCollection<string> Menus { get; set; }
EDIT:
<DataTemplate x:Key="MenuItemTemplate">
<Button Content="{StaticResource image1}" Height="30" Width="100">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="Border" Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}" Background="Orange">
</Border>
<ContentPresenter ContentSource="Content" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="RenderTransform" TargetName="Border">
<Setter.Value>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1.2"></ScaleTransform>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DataTemplate>
If the bar is literally just a green bar, you can also put it on the DataTemplate as a separate Stackpanel from the button, and then put a Style.Trigger on the Button's stackpanel to increase the ZIndex OnMouseOver. The bar would look seamless even if it is just repeating.
So instead of:
<DataTemplate x:Key="MenuItemTemplate">
<Button Content="{Binding ContentText}" Panel.ZIndex="{Binding PIndex}" Padding="10" FontSize="20"/>
</DataTemplate>
You will have
<DataTemplate x:Key="MenuItemTemplate">
<Grid>
<StackPanel >
<StackPanel.Style>
<Style TargetType="StackPanel" >
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="3"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Panel.ZIndex" Value="1"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Button Width="100" Height="100" Content="{Binding ContentText}" Padding="10" FontSize="20" />
</StackPanel>
<StackPanel Panel.ZIndex="2">
<Border Background="Green" VerticalAlignment="Top" Height="30"/>
</StackPanel>
</Grid>
</DataTemplate>
(This doesn't look quite perfect if you run it, but you get the idea)
Dockpanel as our ItemPanelTemplate is the right choice.
Use a Grid with Button and Rectangle (for bottom border) as DataTemplate to show Menu items.
Don't apply margin in DataTemplate's Grid in step2 above. Instead use Grid Padding, Button margin for spacing.
DataTemplate :
<DataTemplate x:Key="MenuItemTemplate">
<Grid Background="DodgerBlue">
<Button Margin="5 5 5 0" HorizontalAlignment="Left" Panel.ZIndex="1" Content="{Binding ContentText}" Padding="1" Width="75" GotKeyboardFocus="Button_GotKeyboardFocus" LostKeyboardFocus="Button_LostKeyboardFocus"/>
<Rectangle Panel.ZIndex="2" Fill="BurlyWood" Height="5" Margin="0 25 0 0"/>
</Grid>
</DataTemplate>
ItemPanelTemplate :
<ItemsPanelTemplate>
<DockPanel Height="30" LastChildFill="True"/>
</ItemsPanelTemplate>
Use the below code as is :
<ItemsControl Panel.ZIndex="10" VerticalAlignment="Top" ItemsSource="{Binding Menus}" ItemTemplate="{DynamicResource MenuItemTemplate}" Margin="0">
<ItemsControl.Resources>
<DataTemplate x:Key="MenuItemTemplate">
<Grid Background="DodgerBlue">
<Button Margin="0" HorizontalAlignment="Left" Panel.ZIndex="1" Content="{Binding ContentText}" Padding="1" Width="75" GotKeyboardFocus="Button_GotKeyboardFocus" LostKeyboardFocus="Button_LostKeyboardFocus"/>
<Rectangle Panel.ZIndex="2" Fill="BurlyWood" Height="5" Margin="0 25 0 0"/>
</Grid>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel Height="30" LastChildFill="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Code-Behind
public IList Menus { get; set; }
public Window1()
{
InitializeComponent();
Menus = new[] { new { ContentText = "Menu1" }, new { ContentText = "Menu2" }, new { ContentText = "Menu3" } };
this.DataContext = this;
}
private void Button_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
Panel.SetZIndex((Button)e.OriginalSource, 12);
}
private void Button_LostKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
Panel.SetZIndex((Button)e.OriginalSource, 1);
}
A summary of what I'm trying to do:
I have a list of shapes
All shapes have a list of blocks
I want to draw all blocks in a canvas and bind their position.
But the problem right now is that even if it draw my blocks it don't bind the position correctly and they always show up at (0,0).
Here is how it look right now with a nested ItemsControl:
<ItemsControl ItemsSource="{Binding Path=Shapes}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Aqua" Width="250" Height="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Blocks}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
So what am I doing wrong or is it bad to do nested ItemControls?
Try using a RenderTransform instead of the Canvas Left and Top
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black">
<Rectangle.RenderTransform>
<TranslateTransform X="{Binding X}" Y="{Binding Y}" />
</Rectangle.RenderTransform>
</Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
I have a ListBox that sometimes contains no items. If this ListBox contains no items, then a watermark and a notification in the form of a button with a tool tip will be displayed. I originally had the button at the bottom right corner of my screen. But it was requested I move the button to a more central location, specifically just below the watermark in the ListBox. I moved the button to the background of the ListBox initially but that did not work because I was unable to get the tool tip or press the button. My question is: Is there a way to have the button function properly on the background of the ListBox.
Style:
<VisualBrush x:Key="WatermarkStyle" Stretch="None" AlignmentX="Center" AlignmentY="Center">
<VisualBrush.Visual>
<Grid>
<Button
Margin="0,50,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ReloadCommand}"
ToolTip="{Binding Path=NotificationTip}"
Visibility="{Binding Path=ShowNotification,
Converter={StaticResource TrueToVisibleConverter}}"
Style="{StaticResource StaticStyle}"
IsEnabled="{Binding Path=CanReload}">
<Image Source="{Binding Path=NotificationIcon}" Stretch="Uniform" Width="35"/>
</Button>
<TextBlock FontFamily="SEGOEWP" FontSize="22" FontWeight="Normal" HorizontalAlignment="Center"
VerticalAlignment="Center" Foreground="Gray" Opacity="1" Text="{Binding BackgroundWatermark}"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
ListBox:
<ListBox x:Name="ListBox"
Grid.Row="2"
Grid.ColumnSpan="3"
BorderThickness="1"
ItemsSource="{Binding Path=ListView}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectedItem="{Binding SelectedDevice}"
SelectionMode="Single">
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding HasItems, RelativeSource={RelativeSource Self}}" Value="False">
<Setter Property="Background" Value="{StaticResource WatermarkStyle}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
Here is the code I have in XAML:
<!-- ItemsControl to print all the GDTs on the map as an overlay on tiles -->
<ItemsControl ItemsSource="{Binding GDTs, Mode=OneWay}" Grid.ColumnSpan="3" Grid.RowSpan="3" Panel.ZIndex="7">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas ClipToBounds="True" SnapsToDevicePixels="true"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding DistanceToLeft}"/>
<Setter Property="Canvas.Top" Value="{Binding DistanceToTop}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<userControls:CommIndicator CommConfig="eDt" DtAntennaMode="eDirectional" DtAzimuth="{Binding Yaw}"/>
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding SourcePath}" Width="{Binding Width}"/>
<Rectangle Height="{Binding Height}" Width="{Binding Width}" Stroke="Orange" StrokeThickness="2"/>
<Ellipse Height="4" Width="4" Fill="Orange" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
All the bindings in there are working except for the one I just added within the UserControl (CommIndicator) : DtAzimuth="{Binding Yaw}".
The error I see in Snoop on that binding is this one : "System.Windows.Data Error: 40 : BindingExpression path error: 'Yaw' property not found on 'object' ''CommIndicator' (Name='')'. BindingExpression:Path=Yaw; DataItem='CommIndicator' (Name=''); target element is 'CommIndicator' (Name=''); target property is 'DtAzimuth' (type 'Int32')"
Is there a way to force th binding to check in the ItemsControl "currentItem" ?
EDIT 1:
Here is the XAML for my UserControl :
<UserControl x:Class="UserControls.CommIndicator"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
xmlns:userControls="clr-namespace:UserControls"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
SnapsToDevicePixels="True">
<UserControl.Resources>
<ResourceDictionary>
<userControls:CommConfigToVisibility x:Key="CommConfigToVisibility"/>
<userControls:AntennaModeToAngle x:Key="AntennaModeToAngle"/>
<userControls:AntennaModeToColor x:Key="AntennaModeToColor"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid Width="100" Height="100">
<!-- Only use this for design reference -->
<!--<Grid Width="70" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center">
<Ellipse Width="66" Height="66" Stroke="WhiteSmoke" StrokeThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Ellipse Width="66" Height="66" Fill="WhiteSmoke" StrokeThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.30"/>
<Ellipse Width="70" Height="70" Stroke="LimeGreen" StrokeThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Resources/BlackShadowTopView.png" Width="40"/>
<TextBlock Text="160" Margin="6" HorizontalAlignment="Center" TextAlignment="Center" Foreground="Black"/>
</Grid>-->
<!-- ADR Communication Circle Indicator -->
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100"
Visibility="{Binding CommConfig, Converter={StaticResource CommConfigToVisibility}, ConverterParameter={x:Static userControls:CommType.eDataRelay}}">
<Ellipse Width="100" Height="100" Stroke="Black" StrokeThickness="7"/>
<ed:Arc Width="99" Height="99" Fill="SlateGray" StartAngle="0" EndAngle="360" ArcThickness="5"/>
<ed:Arc Width="99" Height="99" Stretch="None" ArcThickness="6"
Fill="{Binding DrAntennaMode, Converter={StaticResource AntennaModeToColor}}"
StartAngle="{Binding DrAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eStartAngle}}"
EndAngle="{Binding DrAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eEndAngle}}"/>
<Grid.LayoutTransform>
<RotateTransform Angle="{Binding DrAzimuth}"/>
</Grid.LayoutTransform>
</Grid>
<!-- ADT/GDT Communication Circle Indicator -->
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="90"
Visibility="{Binding CommConfig, Converter={StaticResource CommConfigToVisibility}, ConverterParameter={x:Static userControls:CommType.eDataTransmitter}}">
<Ellipse Width="88" Height="88" Stroke="Black" StrokeThickness="7"/>
<ed:Arc Width="87" Height="87" Fill="SlateGray" StartAngle="0" EndAngle="360" ArcThickness="5"/>
<ed:Arc Width="87" Height="87" Stretch="None" ArcThickness="6"
Fill="{Binding DtAntennaMode, Converter={StaticResource AntennaModeToColor}}"
StartAngle="{Binding DtAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eStartAngle}}"
EndAngle="{Binding DtAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eEndAngle}}"/>
<Grid.LayoutTransform>
<RotateTransform Angle="{Binding DtAzimuth}"/>
</Grid.LayoutTransform>
</Grid>
</Grid>
</UserControl>
remove this:
DataContext="{Binding RelativeSource={RelativeSource Self}}"
from the UserControl, and add this:
<UserControl ...
x:Name="view">
And change all your bindings inside the usecontrol to use an ElementName, like this:
{Binding ElementName=view, Path=DtAntennaMode, Converter={StaticResource AntennaModeToColor}}"
Also, there seem to be a lot of converters going on there. I strongly suggest that you change all this to use a ControlTemplate and inside that you can put ControlTemplate.Triggers and remove the need for converters and DataContext hacks.