'The problem of the IsEnable property of the Button when the ellipse is overlaid on/off the Button?
My current code can click the button (isenable is true) covered by ellipse.
I want to realize that the IsEnable of the Button is true when the ellipse is overlaid on the Button.
The IsEnable of the Button is false when the ellipse leaves the Button.
I don't know what to do.
thanks for help
xaml:
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="IsEnabled" Value="False"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn,Path=MouseDown}" Value="true">
<!--<Setter Property="IsEnabled" Value="True"/>-->
<Setter Property="Focusable" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="IsEnabled" Value="False"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn,Path=IsMouseOver}" Value="true">
<Setter Property="IsEnabled" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Canvas x:Name="myCanvas" Background="AliceBlue">
<Ellipse x:Name="circulito" Canvas.ZIndex="1"
Width="120"
Height="120"
Fill="Transparent"
Stroke="Black"
MouseLeftButtonDown="circulito_MouseDown"
MouseLeftButtonUp="circulito_MouseLeftButtonUp"
MouseMove="circulito_MouseMove"
/>
<Button x:Name="btn" Content="Button" Canvas.ZIndex="2" HorizontalAlignment="Left" Margin="392,54,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBox HorizontalAlignment="Left" Canvas.ZIndex="3" Height="23" Margin="80,129,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="100"/>
</Canvas>
Code Behind:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
namespace ellipsefocusecontrols
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private Ellipse _ellipse;
private Point? _coor;
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("hello");
}
private void circulito_MouseDown(object sender, MouseButtonEventArgs e)
{
_ellipse = sender as Ellipse;
_coor = e.GetPosition(_ellipse);
Point pt = e.GetPosition((UIElement)sender);
VisualTreeHelper.HitTest(this, null, new HitTestResultCallback(myCallback), new PointHitTestParameters(pt));
}
private void circulito_MouseMove(object sender, MouseEventArgs e)
{
if (_ellipse == null)
return;
_ellipse.SetValue(Canvas.LeftProperty, e.GetPosition(this).X - _coor.Value.X);
_ellipse.SetValue(Canvas.TopProperty, e.GetPosition(this).Y - _coor.Value.Y);
}
private void circulito_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_ellipse = null;
}
public HitTestResultBehavior myCallback(HitTestResult result)
{
if (result.VisualHit.GetType() == typeof(DrawingVisual))
{
if (((DrawingVisual)result.VisualHit).Opacity == 1.0)
{
((DrawingVisual)result.VisualHit).Opacity = 0.4;
}
else
{
((DrawingVisual)result.VisualHit).Opacity = 1.0;
}
}
return HitTestResultBehavior.Continue;
}
}
}
picture:
I simply added btn.IsEnabled=false/true; to MouseUp and MouseMove to achieve the desired expression.
But when Ellipse covers the TextBox, the TextBox should get the focus, and the IsEnable of btn should be False.
Edit:
<Canvas x:Name="myCanvas" Background="AliceBlue">
<Ellipse x:Name="circulito"
Width="150"
Height="150"
Fill="Transparent"
Stroke="Black"
MouseLeftButtonDown="circulito_MouseDown"
MouseLeftButtonUp="circulito_MouseLeftButtonUp"
MouseMove="circulito_MouseMove"
/>
<Border Name="border" Canvas.Left="400" Canvas.Top="50" Background="#01000000" BorderBrush="Transparent" BorderThickness="0">
<Button Height="30" Width="80" Click="Button_Click" Content="button">
<Button.Style>
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="False" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=border, Path=IsMouseOver}" Value="True">
<Setter Property="IsEnabled" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Border>
<Border Name="buttonBorder" Canvas.Left="100" Canvas.Top="160"
Background="#01000000" BorderBrush="Transparent" BorderThickness="0">
<TextBox Height="23"
Text="TextBox" >
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="IsEnabled" Value="False" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=buttonBorder, Path=IsMouseOver}" Value="True">
<Setter Property="IsEnabled" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Border>
</Canvas>
But the code below will trigger IsEnable=true on MouseOver regardless of whether Ellipse is on the Button or not.
Any ideas?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


