Hello,
I’m working on a basic 3x3 grid UI (Table Layout) in which I’m setting custom image buttons.
So far it looks like this:
In Eto documentation I see how to remove borders of TextBox, Label, and SearchBox but can’t seem to figure out where we can change the Button border styles?
I have a custom button class I setup cleverly called MyButton.
class MyButton(forms.Button):
def __init__(self, text, tag, on_click):
super(MyButton, self).__init__()
self.Text = text
self.Tag = tag
self.OnClick = on_click
# Initialize default image
self.DefaultImage = drawing.Bitmap()
self.Click += self.on_click_handler
self.MouseEnter += self.on_mouse_enter
self.MouseLeave += self.on_mouse_leave
Is this where I would apply border styling?
To summarize, with a button control, can I do the following:
- Remove the border line
- Change the hover/highlight color
- Set a custom image for default/hover/click states (I did figure out a solution for this but I was hoping this is natively available with the button properties or methods somewhere?)
Part of the “Button State” image setting logic:
def on_mouse_enter(self, sender, e):
# Change image on hover
hover_image_path = os.path.join(image_folder_path, "ICO_{}_Hover.png".format(self.Text))
hover_image = drawing.Bitmap(hover_image_path)
sender.Image = hover_image
def on_mouse_leave(self, sender, e):
# Change image to default on mouse leave
sender.Image = self.DefaultImage
def on_mouse_down(self, sender, e):
if self.ClickImage:
sender.Image = self.ClickImage
My form class where I’m setting some stuff about my buttons like giving them a tag and setting the background color to be transparent:
class MyForm(forms.Form):
def __init__(self):
super(MyForm, self).__init__()
# Rhino.UI.EtoExtensions.UseRhinoStyle(self) # Follow Rhino Light/Dark Mode
self.Styles.Add[forms.Panel]("transparent", self.MyFormStyler)
self.Style = "transparent"
# Form Properties
self.Title = "Table Layout with Buttons"
self.Padding = drawing.Padding(10)
self.WindowStyle = forms.WindowStyle.None
self.Size = drawing.Size(300, 300)
self.Padding = drawing.Padding(40)
self.MovableByWindowBackground = True
self.AutoSize = False
self.Resizable = False
self.TopMost = True
self.ShowActivated = False
forms.Button()
# Setup Buttons & Tags
self.FloorButton = forms.Button(Text="Floor", Tag="00",BackgroundColor = drawing.Colors.Transparent)
self.FloorButton.Click += self.OnButtonClick
Here’s the code I was using to set the button state imagery:
import Rhino
import Eto.Drawing as drawing
import Eto.Forms as forms
class MyForm(forms.Form):
def __init__(self):
self.Title = "Image Button Example"
self.WindowStyle = forms.WindowStyle.None
self.ClientSize = drawing.Size(200, 200)
# Load your images
self.normal_image_path = "default button image file path"
self.hover_image_path = "hover button image file path"
self.click_image_path = "click button image file path"
self.normal_image = drawing.Bitmap(self.normal_image_path)
self.hover_image = drawing.Bitmap(self.hover_image_path)
self.click_image = drawing.Bitmap(self.click_image_path)
# Create the image button
self.image_button = forms.Button(Text="", Image=self.normal_image, Size=drawing.Size(100, 100))
self.image_button.MouseEnter += self.on_button_mouse_enter
self.image_button.MouseLeave += self.on_button_mouse_leave
self.image_button.Click += self.on_button_click
# Add the image button to the form
layout = forms.DynamicLayout()
layout.AddRow(self.image_button)
self.Content = layout
def on_button_mouse_enter(self, sender, e):
self.image_button.Image = self.hover_image
def on_button_mouse_leave(self, sender, e):
self.image_button.Image = self.normal_image
def on_button_click(self, sender, e):
self.image_button.Image = self.click_image
Rhino.RhinoApp.WriteLine("Image button clicked!")
self.Close()
# Create and show the form
form = MyForm()
form.Show()
default button state:
hover button state:
clicked button state:
Thanks for your time and response!
).
