I have multiple images that have labels (the UI element) in the bottom right corner. At creation, I first load the images and then the labels, so that the labels are in the foreground (visible). At runtime the order of the images changes - they are repositioned on my Grid. As a result, Labels aren't visible if the image was repositioned, because the Label was created earlier and is therefore behind the image.
Now how do I force the label to stay on top without recreating the labels?
Regards
Try set Canvas.ZIndex = 1 to Label
Like:
this.labelName.SetValue(Canvas.ZIndexProperty, 1);
or in XAML:
<sdk:Label Canvas.ZIndex="1" Content="My Text"/>
Related
I have a WPF application in which the main window holds a DockPanel with two children. The top child is another DockPanel which holds the menu and is of a fixed size. The lower child is the main work area, which should fill the remaining space and be resizable along with the window. (Hence the DockPanel parent.) Draggable objects get placed in this work area and might appear anywhere inside it.
I'm trying to figure out how to make scroll bars appear if an object is dragged outside the visible area.
The approximate XAML structure currently goes
<Window>
<DockPanel>
<DockPanel with fixed-size content ... >
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid ClipToBounds="True" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"/>
</ScrollViewer>
</DockPanel>
</Window>
So far I've tried a Grid and a Canvas. Both have built-in scroll bars, but they won't appear unless dimensions are specified--but if I apply dimensions, then the panel won't automatically resize to fill the work area.
Then I tried surrounding the panel with a ScrollViewer. The unconstrained panel now successfully auto-resizes to fill the space, but the ScrollViewer has the same problem as the panel--it will only display scroll bars if it's constrained to hard dimensions.
I'm thinking that this would work if I could dynamically constrain the ScrollViewer. So far, I haven't found any reliable way to dynamically apply size values to the ScrollViewer.
Is there a way to create a Binding between the ScrollViewer dimensions and the ActualHeight and ActualWidth of the Grid? Or, is there a way I can define the ActualHeight/ActualWidth of the grid as a DynamicResource that can be applied to the ScrollViewer? Or is there some other panel or method or resource that can be used so that all three criteria (panel fills available space, panel auto-resizes with window, anything dragged outside visible area triggers scroll bars) are met?
Thanks in advance for any help.
The problem was that I did not have a DockPanel.Dock setting on the bottom child of the containing DockPanel. Relying on the DockPanel's LastChildFill wasn't enough to do the job. Once I set DockPanel.Dock = Bottom on the bottom child, the scroll bars started working.
I have a grid, which has 2 rows and 3 columns.
I need 2 background images for my grid - one will be on the top of the other. (ZIndex of one background should be bigger than other background has). How can I achieve this?
I will need to swap these 2 backgrounds frequently, which means the top background will become lower background and lower background will become top background. Apart from that, images of these two backgrounds are gonna change a lot too.
This example has grid, which contains text switcher at the bottom. As a background, it has a picture of room. When I click 'next' button in the text switcher, I want the top background picture to gradually disappear (doubleAnimation updates opacity) and show lower background under it. Maybe I can achieve gradual switching of backgrounds in a better way, but I honestly dont know how to do it.
You can draw them as two images on a Canvas inside a VisualBrush and use that as your background:
<Grid>
<Grid.Background>
<VisualBrush>
<VisualBrush.Visual>
<Canvas Width="256" Height="256">
<Image Source="image1.png" Panel.ZIndex="1" /> <!-- This will appear over top of the other one -->
<Image Source="image2.png" Panel.ZIndex="0" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
Source and Panel.ZIndex can then be set either directly in code-behind or via data binding.
This is a bit of an unsual way of going about this though, there's almost certainly a better way of doing whatever it is you're actually trying to do.
In this case I would use databinding to bind to a property in the view model that stores the background image. When the condition changes and the view model property is changed the UI will reflect those changes.
I have a 50x50 draggable grid inside another grid that I am able to move around with the cursor. (I forgot that I am using the DraggableExtender class
The problem is that I want the moveable grid to be relatively positioned inside it's container grid no matter how the container grid is resized. My solution right now is to dynamically change the HorizontalAlignment and VerticalAlignment of the moveable grid whenever it is moved, but this is hacky and doesn't work well.
Relative positioning in a grid is one of the easiest things to do in XAML, but not when you have draggable elements ;(
Any ideas?
EDIT for code and images:
My XAML:
<Grid Margin="10" ClipToBounds="True" Background="#FFB4B4B4">
<Grid Name="testGrid" MouseLeftButtonDown="testGrid_MouseLeftButtonDown" MouseLeftButtonUp="testGrid_MouseLeftButtonUp" RenderTransformOrigin="0.5,0.5" Height="100" Margin="50,0,0,0" Width="100" Background="#FFE6E6E6" local:DraggableExtenderGrid.CanDrag="true" HorizontalAlignment="Center"/>
</Grid>
and I use a DraggableExtender class (shown here) which I have edited to apply to a Grid instead of a Canvas (I was hoping for better results from a grid.. but both containers produce the same result, even with the original class on a canvas).
This is a picture of my 2 grids. I can move the smaller grid around inside it's parent grid, but I would like for it to maintain relative positioning once the window is resized. This is what it currently looks like when I resize the window. In this particular example, the grid would ideally remain slightly off-center horizontally and vertically in both pictures.
May be you should try placing the Grid inside a Canvas instead..
Take a look here
I want to be able to align buttons within a stack panel centrally. The number of buttons is dynamic and generated when the control is loaded.
For example, if 1 button is generated then this button should be placed in the center of the control. If 5 buttons are displayed then all 5 should be horizontally aligned next 2 each other but central to the control.
An alternative approach would be to have the control dynamically resize based on its content so it would be wider with more buttons and then horizontally align the user control on the page but I'm not sure how to approach either solution?
Does anybody have any ideas?
This should work. Set the Horizontal Alignment in the stack panel, and make sure when you are dynamically adding your button, you give them each a margin property value to give them some space from each other. horizontal to each other, central to the control.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="20">
<Button Margin="10">one</Button>
<Button Margin="10">two</Button>
<Button Margin="10">three</Button>
<Button Margin="10">four</Button>
<Button Margin="10">five</Button>
</StackPanel>
You can simply set following in XAML
StackPanel.HorizontalAlignment = HorizontalAlignment.Center;
or
HorizontalAlignment="Center" (as GrayFox374 mentioned)
Here is a MSDN sample explaining various alignment operations, having exactly what you need I think -
How to: Horizontally or Vertically Align Content in a StackPanel
I have a usercontrol that consists of a label and a textbox. It's inside a scrollviewer.
I'm drawing an adorner on top of it and I need to adjust the size of the adorner to the visible size of the control.
How do I get the visible size of the control?
In the image below the green rectangle is the adorner. As you can see it's being drawn over the scrollbar on the right side.
Is it possible to get the size of the rendered part or will I have to manually go trough the visual tree and calculate it?
edit: more background info
I'm build a very limited form designer. Everything is happening in code. The adorner is used to display the current selected control.
I would put a Canvas in your ScrollViewer and place all of your user controls on the Canvas. If the Adorner is then painted on the Canvas you don't have to worry about it drawing over top your ScrollViewer.
You would also have the added benefit of the adorner disappearing under the ScrollViewer, rather than just ending at it, so your users know that the control extends beyond the ScrollViewer. This is how all of the designers I've made and seen made in WPF work.
If you are only worried about clipping the adorner, then you can include an AdornerDecorator in your content. Something like:
<ScrollViewer>
<AdornerDecorator>
<!-- Your content here -->
</AdornerDecorator>
</ScrollViewer>
Or you can include the AdornerDecorator directly in your UserControl.