Here is my UI structure in the Hierarchy:
And here is how it looks:
So basically, when I click the first button, its color changes on click as expected. However when I click the second or the third one, the first one also displays the click animation, instead of the one I clicked.
Here are some things I noticed:
The buttons do register a click as expected.
When animating the button further than the default (by using custom timeline animations) the behavior is slightly different between the first and the second + third ones.
Things to note:
I am using a horizontal layout group on the panel with the following settings:
Each button has a TMP image inside with the same size as the button itself.
I theorize that the HLG is the problem here, but I've tried many settings and the result stayed static.
If you need any additional information, please ask.
Turns out the problem was that the target graphic on the buttons were all set to the first one. That's why they still registered the click properly even though the visuals were messed up.
Related
I am trying to do something like X and O game, and I want the image of button be showed if it was pressed but it's not working, I made sure that button is working by reversing the command it worked fine! Here is screenshot
I tried to reverse the command and it worked so the button is working fine
Have in mind that a UI.Button requires at least one active and enabled visual component (Image/Text/etc) with RaycastTarget enabled ... I suspect since you disabled the image you simply disabled the interactions with this button
=> solution could be to simply have two Images like e.g.
- Button (with Button + Image component)
|-- Icon (with Image component)
The Button object is your main button with a background image - can be completely transparent, but can also react to interaction and have color for hover, press etc. This you always leave enabled and here you enable the RaycastTarget.
Then in Icon you assign the according circle or cross sprite and can enable / disable it accordingly. Here you can also deactivate the RaycastTarget to save some performance. You could even have two different child icons according to the sprites then you don't need to assign the sprite on runtime either but just activate according child object
I am currently trying to make a program where I have a picture of a calendar and when the user clicks on any given Friday a message box will appear. The current method I have been trying to do this is by placing a button over the dates, but I can't seem to find a way so that the button will be invisible and functional at the same time.
This is all in C# Windows Forms Application.
Any ideas?
There are several solutions:
Use an empty PictureBox instead of a Button. This is the nearest and quickest solution to what you say you want. Note that this secondary PictureBox needs to be a child of the calendar's one (with its background color set to Transparent). Transparency in Windows.Forms only applies to direct parents (it's more complex than this, but let's simplify).
Use the MouseUp event on the PictureBox where you are showing the calendar, and use the MouseEventArgs supplied as arguments to the event handler to find the X and Y position of the mouse within that control when the button was clicked.
Use a decent calendar/datepicker control instead of showing an image of one
Matter of fact: I don't endorse #1, and just put it there since it's what you seem to be asking for. I'd rather go with #2 or #3 (specially #3)
PS: if you want to really simulate Click, you should need to handle both MouseDown and MouseUp (a click usually means pressing a mouse button down on a control then releasing it within the same control)
I have 3 pages in my application.
First page: 5 Buttons, each navigates to different page (currently, only the first button works).
Second page: Back Button and ListView, the ListViewItems are UserControlItems with Button, Image and TextBlock. When you click on the Button (of the UserControlItem) it Navigates to the third page, which is Media Player Page with alot of controls.
Third page: Media Player page with alot of controls such as MediaElement, Slider, Buttons and more
When I navigate from Third Page to Second Page using the Back Button, sometimes the screen stays black (the color of the theme) and sometimes it loads too much time. In addition, the ListView has visible vertical scrollbar (always) which is not shown unless you move your mouse on the ListView.
How to fix these problems?
EDIT 1:
link to my project - put some .wmv/.mp3/.mp4 files in the Videos Library folder.
EDIT 2:
I investigated the black page issue abit more and I found that the MediaElement is the cause.
The MediaElement stores the stream and it slows the computer.
In order to resolve to problem, when you click on the GoBack Button, it first set the source of the MediaElement to null, and only when the MediaElementState == Closed, I go back - seems to solve my problem (since I applied the solution I didnt experience more black screens).
About the scrollbar - I think I'll be able to solve it if I simulate MouseOver over the ListView - no idea how to do it
Ok Ill List out the issue one by one.
List View Scroll Bar : Since we are developing for a potential touch surface so scrollbars are not meant to be visible every time.
Blank Page : When you press the back button then Big page Ie third page gets stored in the forward navigation property of the history element. Additionally all the resources that were being used in the third page is disposed. So the time taken to go to second page becomes huge.
Please try havig a fourth page which will have less controls. And see if any Black background issue is occuring or not. It will give a better and clear picture.
--- Update Code for permanent visibility of scroll bar---
Please download the code for listview styling from
Listview styles
add your code to the project
and replace all FadeOutAnimation By FadeInAnimation.
This was the quickest I could do for a solution. For a Better one you can always play with the styles.
Ohh one more thing please add
Style="{StaticResource ListViewStyle1}"
To your list view. please try and let me know.
I have a view and within the view, there are two user control, each with a button on it. When the page loads, the first user control will load. when i click on the button in the first user control, I would like to slide the first user control left, making it invisible and display the second user control. when i click on the button in the second user control, I would like to slide the second user control right, making it invisible and displaying the first user control again. can anyone help on how to achieve this?
If I get correctly, you want something like Carousel in wpf. In case that's it, here's the link. It allows you to slide several items left-right to switch between them.
Another way to go would be using default animations in WPF, meaning DoubleAnimation applied to Margin property that increases margin from 0 to 500 (to move it off the screen) and back to 0 (to return it) or something like that. Head's up for double animation and moving controls is here and official documentation here.
Rather than hard-code an animation designed for your specific scenario, you could do something a little more generic and adapt the TransitionControl that uses pixel shaders. Set the content property and you can specify which shader effect you want it to apply as the transition.
My application has several controls. Like in one screen has TreeView on left side, GridView with paging in the middle and 4 buttons at right side. The controls properly appear when the form is in a maximized state, but if I minimize it the controls do not properly fit on the screen.
I tried with different different tricks like table layout.. in dat I added a panel, etc...
But I could not solve the problem.
How can I create such type of screens which fits independently of size of my window?
Thanks
I had the same problem a while ago. In my case i had a Button and a ListView within a GroupBox that was inside a SplitContainer, which was within a UserControl on a TabControl. I wanted the button on the top right located and anchored and the ListView took the space leftover, so i couldn't dock it. Instead it was anchored in all four places.
In my case my button and the listview are worked and behaved correctly in the designer, but in my running app the button was positioned to far on the right and the ListView size had also a too much width.
For a first bugfix i did some iterations about positioning the button in the designer a little more to the left, check it running mode, re-align the button in designer from the impression i had in the last run.
So i got it to work and started over with some other thing i had to do in my app. After a while i got a new feature request and needed another button within this messy thing. This time i did a complete rebuild of the gui elements on a new usercontrol, just to see if the problem reappears. To my amazement this gui mock just behaved as expected.
Within my code i didn't anything about changing the location, size, anchors, docks, etc. So the problem had to be within the InitializeComponents() code created by the designer.
I started with a diff of both versions and couldn't see any big differences (there were a lot of them, but only minors like size, location or name). So i started to put code from my crazy usercontrol into the mock and running the mock in my app. After several copies the problem also appears in my mock, so i got the root cause of the problem.
What do you think, which property leaded to the crazy behaviour?
It was the MinimumSize of my SplitContainer!
So to get really the root cause of your problem you should start over with an empty UserControl (or Form) and just place all the elements on it with the desired behaviour (size, location, anchor, dock).
Nothing more!
Then test if this mock behaves the way you want and if not, post this code here and tell us what you expected to see.