I'm working on a project using wpf.
The UI design is based on a tile system, where you can drag and drop tiles to specific locations.
The presentation of the tiles uses a customized TreeView that renders the items as Grids.
looking close to the rendered grid items i recognized that wpf renders the grid with shadows on the left and the right side.
Does anyone have an idea why there are shadows rendered? For a specific feature i have to color the bottom part of the grid red and it looks awkward cause of the rendered shadow.
Late to the party but for someone with same issue which seems to be the result of using Effect in the application like DropShadowEffect It solved my issue by adding following line to the Grid/Border ...
UseLayoutRounding="True"
Related
I'm having a problem with auto sizing all of the controls on my WPF. I'm able to get them too stay on the side of the screen where I want them, the only problem is that, when I have the window the same size as the editor, it looks perfect, however, when I change too full screen (Has too be full screen), it centers everything rather then stretching too fit across the entire window.
Any idea how I could go about fixing this? I have provided a few photos.
After doing a lot of research, I found putting it in a panel, and then making the panel Anchor too none and then setting the Alignment too none, it fixed the windowed version but not full screen version. Any help would be great.
I'm setting the window too full screen with this.WindowState = FormWindowState.Maximized; if that makes any difference at all?
The grid should help you with that, just define columnas and rows. Then put the controls inside the rows and change the alignment (vertical and horizontal) to stretch and you are done.
You will have a problem with the text size, that need tl be managed in code behind or in your viewmodel
If you want a control to span on múltiple rows or multiple columns use the grid.rowspan and grid. Columnspan properties.
Sorry for the bad formatting, im on the phone
Is there a way to move a popup to back, so it does not always display on the front of the application?
I have a canvas that displays many shapes, which are resizable. To get the resize box I am using a popup, because it was suggested that the best way would be to use adorners, but these are not used in UWP, so the alternative are popups. It works quite well, but when I have another element overlaying my canvas and resizing was enabled on a shape, the popup elements (resize thumbs/nodes) are displayed on top of the element that should be overlaying the canvas. Is there a way to tell the popup that it should not display on a "higher level" than my canvas?
A Popup control is intended to be displayed on top of all other content so it seems you're not using an appropriate control for what you are trying to achieve.
Without seeing more of your code and having a clearer idea of what you're doing (repro?) it's hard to suggest what you should do. However, I'd avoid resizing control that aren't on top of the viewable area or having multiple items in a resizable mode (or just with adorners displayed) at a time. Both of these should avoid what you're reporting.
I started my app by placing rectangles and other objects on a stackpanel. That worked will until I wanted to split my rectangles and have two columns of rectangles. The vertical stackpanel worked well until I needed to split my rectangles into two columns and put stuff on the left and stuff on the right.
So I converted to a canvas. Now
mainCanvas.Children.Add(grid); // seems to replace what the last Add placed on screen. Any ideas how to control the position of items added to the canvas?
Edit:
Ok clearly a canvas is the wrong panel to use. Two column's of stackpanel's might be made to work. But when I look at what I am actually trying to accomplish, the column's aren't limited to two, but could be n number of columns. Why? Because the application is a flowchart style app that builds a custom language script. The diamond decision shape splits one column into two which can split into two more extra.
I wonder about using a single stack panel and just making a grid with multiple grids horizontally in it. But mouse events would have to be smart enough to know which grid in the grid your actually in. Not undoable I think, but not trivial...just looking to see if there is a obvious use this choice that i am missing by being a wpf rookie.
Edit2:
The issue I have with just using a grid is that when the window is stretched a
grid does not resize to the new window size.
making a grid of multiple other grids, then using isMouseOver to test to see which grid in the single child of the stackpanel actually needs mouse highlighting works.
I'm developing a small WPF application which uses a ScrollViewer to show an Image in a Window.
I have generated the window and all his relative code (I will show it if needed but I think is not usefull for the point of this question) programmatically.
The question/ how to is the following. I have to show/hide (pressing a button) a control (basically a InkCanvas) over the image contained in the ScrollViewer. Except the part oh show/hide is pretty simple to use the button event) which is the best way to add a control (and which type of control/container) at the Window forcing him to be over the ScrollViewer and then be able to move around dragging it?
I'm relatively new to WPF I used a lot of WinForms (I can do this in WinForms but WPF is a new world for me).
Thanks in advance!
As for the container you should use a Grid which will center and put on top of each other the controls in a same cell.
As for drag and drop if you want to implement it yourself I've provided a minimal implementation here: https://stackoverflow.com/a/17014906/145757
Otherwise you can use the MouseDragElementBehavior behavior provided by Blend.
Here is a tutorial that demonstrates its usage from Blend itself: http://www.c-sharpcorner.com/uploadfile/nipuntomar/expression-blend-4-behaviors/
But you can use it without Blend by importing the Blend libraries and using it from your XAML with something like:
<InkCanvas ...>
<interactivity:Interaction.Behaviors>
<blendbehaviors:MouseDragElementBehavior />
</interactivity:Interaction.Behaviors>
</InkCanvas>
with interactivity and blendbehaviors being mapped to the Blend namespaces.
Following the guide here, I have created a full-screen WPF application. But I met a problem: the various size & resolution of screens. For example, I want to put several sprites on the screen as buttons; but they are located at different positions in each screen, and even different to what shown in the XAML designer.
I have searched all over without a clue got. How can I fix this problem? (to make the buttons appears the exact place (in the center), and better, help the xaml designer reflect exactly what will happens when the program is running). Any help will be appreciated.
UPDATE: I'm defining my page as a Canvas inside the Window element. Actually I like Canvas more, cause I can easily put my sprites anywhere, not like a grid.
In general, you should not use pixel values in WPF.
Instead, you should layout your content in <Grid>s with rows and columns, and it will automatically expand to fill the screen (based on the alignments and row / column definitions).
Avoid using the canvas. Also, do not rely too much on the designer to build your layout. Using Grids, Stackpanels and/or Dockpanels will give much better results (and scale when resizing your window). For example, if you use only the designer and drag-and-dropp all your elements, the designer often puts huge margins a bit randomly and this will not always scale properly if you resize your window.