C#•2w ago

WPF buttons

Hi all, I am very new to wpf c# or just coding in general. I am trying to recreate these kind of buttons (To be exact I just want the rounded corners the image in the aligned in the center and just a single caption underneath like the WPF GitHub) I have this for my code but it is generating a lot of issues and also doesn't apply the corners or semi transparent background This is my XAML <Button Margin="2 HorizontalAlignment="Center""> <Button.Resources> <Style TargetType="Border"> <Setter Property="CornerRadius" Value="5"/> </Style> </Button.Resources> <Image Source="/Images/cmd.png" /> <TextBox Text="Device 1"/> </Button>

53 Replies

canton7•2w ago

I had a quick play, got this:

        <Button Width="200" Height="200">
            <Button.Template>
                <ControlTemplate>
                    <Border Background="#99ffffff" CornerRadius="15">
                        <Grid Margin="25">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Rectangle Grid.Row="0" HorizontalAlignment="Left" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" Fill="Black"/>
                            <TextBlock Grid.Row="1" FontSize="18" Margin="0,8">Getting started</TextBlock>
                            <TextBlock Grid.Row="2" FontFamily="8" TextWrapping="Wrap">An overview of app development options, tools, and samples.</TextBlock>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Button Width="200" Height="200">
            <Button.Template>
                <ControlTemplate>
                    <Border Background="#99ffffff" CornerRadius="15">
                        <Grid Margin="25">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Rectangle Grid.Row="0" HorizontalAlignment="Left" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" Fill="Black"/>
                            <TextBlock Grid.Row="1" FontSize="18" Margin="0,8">Getting started</TextBlock>
                            <TextBlock Grid.Row="2" FontFamily="8" TextWrapping="Wrap">An overview of app development options, tools, and samples.</TextBlock>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

canton7•2w ago

HMO•2w ago

Good solution i had this in mind but he needs to make it a custom control to make it reusable and should replace rectangle with image

canton7•2w ago

Yeah of course, and add styling for mouse-over But it's as much effort as I wanted to put into it 😛

HMO•2w ago

I know It's good He just needs a few dependency properties and make the control inherit from button and it will be fantastic

canton7•2w ago

Eh I wouldn't inherit from Button. WPF would normally prefer that you wrap things than subclass them

HMO•2w ago

How is he going to get the click event and command though ?

pauliologyOP•2w ago

HMO could you give me a hand on how to make it reusable as i need to make like 50 of these and thank you very much canton7

HMO•2w ago

Use the custom control template and paste the template canton gave you in it

HMO•2w ago

pauliologyOP•2w ago

ok i'll give that a go right now @HMO when i use that custom control it creates a .cs file am i meant to create a User Control instead ?

HMO•2w ago

Go to the theme folder It has generic.xaml

pauliologyOP•2w ago

Sorry please bare with me, where is the theme folder you are talking about as i can't see it

HMO•2w ago

It's generated in the vs solution You'll find it quick

pauliologyOP•2w ago

when i created it just creates the CustomButton.cs

canton7•2w ago

I got bored: https://paste.mod.gg/dildpktmnooi/2

BlazeBin - dildpktmnooi

A tool for sharing your source code with the world!

HMO•2w ago

canton7•2w ago

There's no mouse-over style etc though, of course

HMO•2w ago

Nice i love your solution :meowheart:

pauliologyOP•2w ago

Bare with me im just implementing it now and thank you both

canton7•2w ago

(The stuff with ElementName=root is a hack, but it's neater than the equivalent RelativeSource noise)

pauliologyOP•2w ago

forgive me but i am still struggling to get it going just working through a few errors So i have put it in a CustomControl folder I have adapted your code and im getting this error The type 'CustomControls:FancyButton' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.

canton7•2w ago

What code produces that error?

pauliologyOP•2w ago

<CustomControls:FancyButton Image="/Images/Cmd.png" Title="Getting Started">An overview of app development options, tools, and samples.
    </CustomControls:FancyButton>

<CustomControls:FancyButton Image="/Images/Cmd.png" Title="Getting Started">An overview of app development options, tools, and samples.
    </CustomControls:FancyButton>

canton7•2w ago

Where do you define CustomControls?

pauliologyOP•2w ago

https://paste.mod.gg/xyuviltzxbhw/2

BlazeBin - xyuviltzxbhw

A tool for sharing your source code with the world!

canton7•2w ago

xmlns:controls="clr-namespace:DH.CustomControls" So your namespace is called controls So, <controls:FancyButton ... Can I suggest taking a basic WPF tutorial first? You really need to have the basics nailed before starting the more advanced stuff

pauliologyOP•2w ago

absolutely. I have been trying to follow some basic tutorials, but the youtube videos always skip over the important details. If you could recommend a website or something i'd love to look at it

canton7•2w ago

Unfortunately I don't have any good recommendations as I learnt from a colleague

pauliologyOP•2w ago

I see as for the namespace of Control? I thought i changed it to CustomControl namespace DH.CustomControls

HMO•2w ago

https://learn.microsoft.com/en-us/dotnet/desktop/wpf/?view=netdesktop-9.0

Windows Presentation Foundation for .NET documentation

Learn about using Windows Presentation Foundation (WPF), an open-source, graphical user interface for Windows, on .NET.

HMO•2w ago

https://youtube.com/@singletonsean?si=C_AY66nMaLPGlcjA

YouTube

SingletonSean

Hi, I’m Sean! I’m a software developer with a long history of .NET development (mostly desktop). Outside of the .NET world, I have a huge passion for building web applications and I use Neovim btw. This channel is focused on .NET desktop development and general software development topics. I try to present topics in a practical and entertai...

HMO•2w ago

These 2 are good enough

pauliologyOP•2w ago

Oh i got it except now its building with 0 errors ? yet coming up with an error

canton7•2w ago

What error?

pauliologyOP•2w ago

i don't really know its not showing me Build started at 9:51 PM... 1>Error: Illegal characters in path. theres no output errors what does that mean illegal characters in path, i haven't changed anything ffs

canton7•2w ago

One of your filenames contains illegal characters?

pauliologyOP•2w ago

@canton7 I have had a semi victory

pauliologyOP•2w ago

this is what its created

canton7•2w ago

Not bad! Left-align that image, put a colored background on the control behind to see the transparency

pauliologyOP•2w ago

am i missing the border? Nah i want it centered like that, its perfect

pauliologyOP•2w ago

there we go

canton7•2w ago

Might want to fix your icon 😛 Was there a border before? I can't tell. You can stick on one if you want

pauliologyOP•2w ago

yeah i love the fact its meant to be transparent and yet the transparent background isn't LOL Thank you again

canton7•2w ago

Something simple would just be:

<Border CornerRadius="15" Cursor="Hand">
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="Background" Value="#99ffffff"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#ccffffff"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>

<Border CornerRadius="15" Cursor="Hand">
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="Background" Value="#99ffffff"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#ccffffff"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>

pauliologyOP•2w ago

oh for mouseover sounds grand does that mouseover just go in the same FancyButton.xaml file @canton7 how do i append that to the FancyButton. As i get errors when trying to copy paste that in. I get that it can have only one child. So im wondering do i put that elsewhere ? like usage ?

canton7•2w ago

The first line is a modification of the Border line that's in my original sample. The lines underneath are inserted, before the <Grid

pauliologyOP•2w ago

Yeah but is there a way to make that a template also as i cant append it to your FancyButton nvm i think i got it you are a godsend

pauliologyOP•2w ago

in action

Gaming

Programming

WPF buttons

Did you find this page helpful?