0

I've been trying some things using WPF, and was wondering if it was possible to detect the MouseOver trigger 'through' a label.

The code that I came up with (does not function properly):

<Border
       Height="75"
       Width="75"
       HorizontalAlignment="Center"
       VerticalAlignment="Top"
       CornerRadius="10"
       Background="#2c2c2c">
       <Border.Style>
              <Style TargetType="Border">
                   <Setter Property="Background" Value="Transparent"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#1b1b1b"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
              </Border.Style>
</Border>
<Label
       Content="I'm a wannabe button!"
       Name="Button"
       MouseDown="Button_MouseDown"
       Foreground="White"
       Width="75"
       Height="75"
       HorizontalAlignment="Center"
       VerticalAlignment="Top"
       HorizontalContentAlignment="Center"
       VerticalContentAlignment="Center"
       Cursor="Hand">
</Label>

So far I haven't been able to do it, so I thought I'd just ask it here.

It's in an attempt to make a button with rounded edges; if there's any easier way to do this, please tell me!

PS. Sorry for any formatting issues, I'm pretty new to this all. Thanks in advance!

PPS. On a related note, what is the correct word for, for example, a label? Widget? Object? Just label? Thanks.

LoC
  • 27
  • 4
  • It's been a while since I coded anything that used WPF, but it seems to me that if you want a button you should use that and not a label. If I recall correctly buttons can be styled pretty freely in WPF. – 500 - Internal Server Error Jun 15 '21 at 16:02
  • So you're going to want to learn about [control style templates](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/styles-templates-overview?view=netdesktop-5.0) to make things like [custom buttons](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/walkthrough-create-a-button-by-using-xaml?view=netframeworkdesktop-4.8), usually the easiest way to start learning about this is put a button on your editor screen, right-click it and select (sorry I forget the exact verbiage) "create template copy" or something like that to get a default template copy to edit as you like. – Chris W. Jun 15 '21 at 16:09
  • When you set content if a label to a string, what you get is a textblock with that string as it's text. Label is a contentcontrol. A button is a contentcontrol whose outer element is a border. When you set content of a button to a string you get a textblock as content of the button with it's text set to that string. So i suggest you start with a button and set it's content to "i'm a real button". Then template / style up that button. – Andy Jun 15 '21 at 17:05
  • To change the shape of the button, you need to change its template. See an example of a button template here: https://stackoverflow.com/questions/67987108/wpf-round-button/67989435#67989435 If you cannot change to the form you shape button, then write what problems and I will try to solve them. – EldHasp Jun 15 '21 at 17:56
  • _"It's in an attempt to make a button with rounded edges; if there's any easier way to do this, please tell me"_ -- depending on what you want, change the button's border's corners or replace the whole template with whatever you want. See duplicate. – Peter Duniho Jun 15 '21 at 18:12

1 Answers1

0

It's in an attempt to make a button with rounded edges; if there's any easier way to do this, please tell me!

You can template a Button to look however you want:

<Button Content="I'm a Button!" Foreground="White">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border x:Name="border"
                       Height="75"
                       Width="75"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       CornerRadius="10"
                       Background="Transparent">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Top" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Background" Value="#1b1b1b"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>
mm8
  • 163,881
  • 10
  • 57
  • 88