I'm working on a game using WP7 silverlight. Some controls are moving and at some point they get outside the canvas they where in.
I wonder why they are not hidden?
In windows forms when a control gets outside a panel for example, i.e:
control.left > panel.width
it disappears. Can this be possible in silverlight?
thanks..
You should use the Clip property.
The following will show a Button that will show outside of the Canvas because button width > canvas width:
<Canvas Width="200" Height="200">
<Button>My button with a lot of text</Button>
</Canvas>
Now if I add the Clip property, what goes outside of the clip region gets hidden:
<Canvas Width="200" Height="200">
<Canvas.Clip>
<RectangleGeometry Rect="0,0,200,200" />
</Canvas.Clip>
<Button>My button with a lot of text</Button>
</Canvas>
Related
I've programmatically generated buttons in a UniformGrid i.e. 4 rows and 4 columns, so 16 buttons.
I want to be able to click and drag to create a rectangle box to select a box of buttons.
Is this possible?
Trying to use this example currently but not seeing the drag box appear
Click and drag selection box in WPF
Currently, since it's all programmatic, the UniformGrid code in XAML is this:
<Canvas DockPanel.Dock="Top" Name="buttonCanvas" Width="800" Height="400">
<Rectangle x:Name="selectionBox" Visibility="Collapsed" Stroke="White" StrokeThickness="4" />
<UniformGrid DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="uniformGrid" Grid.Row="1" Width="800" Height="400"
Rows="{Binding RowNums}"
Columns="{Binding ColumnNums}" MouseDown="uniformGrid_MouseDown" MouseUp="uniformGrid_MouseUp" MouseMove="uniformGrid_MouseMove" Background="Transparent">
</UniformGrid>
<!-- This canvas contains elements that are to be selected -->
</Canvas>
Start by drawing a Canvas over the UniformGrid:
<Grid>
<UniformGrid>
<Button/>
...etc....
</UniformGrid>
<Canvas/>
<Grid>
Then you would by handle the mouse down, mouse move and mouse up events for the canvas. In mouse down you would add a rectangle to the canvas as the current mouse pos, in the mouse move you would resize the rectangle based on the current mouse pos and work out which buttons were enclosed by the rectangle and set them to be "selected" by binding to a view model somewhere. In the mouse up you would remove the rectangle. You would have some kind of trigger in a style to set the style to be different when selected
I want to make a custom control which will be used as an overlay. The control should contain a couple of child controls which should be drawn and should be clickable as usual. But everything else in the control should be transparent and "clickable-through".
Here is how I try to achieve this... First, I'm using PreviewMouseDown\Up\Move events in the window where the overlay is going to be placed. I want these events to "go through" transparent part of my custom control, but stop at not-transparent (for example at my button). Second, here is the xaml for my control (root UserControl node was left untouched):
<Canvas Background="transparent" IsHitTestVisible="true">
<Button Canvas.Left="384" Canvas.Top="34" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" IsHitTestVisible="True" />
<TextBlock Canvas.Left="27" Canvas.Top="105" Height="36" Name="textBlock1" Text="TextBlock" Width="432" FontSize="24" IsHitTestVisible="False" Foreground="Red" FontWeight="Bold" />
</Canvas>
However if I set Canvas' IsHitTestVisible to false, the whole control including button becomes "unhittable". If set the it to true my all the tunneling events stop at custom control and button becomes unclickable.
What is the right way to achieve this kind of behavior?
Is it possible to do so without subclassing canvas (or any other panel)?
You should set the background of the Canvas to null (or just no background, null is default). Transparent is "visible" to the mouse clicks.
I currently have two panels with controls on my page and when i set the top to hidden and bottom panel to visible the bottom panel is hovering down the middle of the page.
Is there a way to set this / use another control so that the 2nd panel will go to the top of the page.
thanks
<StackPanel>
<local:MyPanel1 Width="300" Height="100" Visibility="Collapsed" />
<local:MyPanel2 Width="300" Height="100" />
</StackPanel>
You can set the panels' visibility in codebehind, or better, databind it to your ViewModel (possibly using a ValueConverter to convert to the Visibility enum).
Simple, yet frustrating issue here...
I have a PopUp control.
It is contained in side a Grid, which has a Grid.Clip defined.
The PopUp is still visible outside the Grid's clipped area.
i.e.
<Grid Background="Red" Width="150" Height="150">
<Grid.Clip>
<RectangleGeometry Rect="0,0,150,150" />
</Grid.Clip>
<Popup IsOpen="True" Margin="100,100,0,0">
<Grid Background="Green" Width="150" Height="150" />
</Popup>
</Grid>
Ideally, the green box should not appear or "bleed" outside of the red box. The problem is that it is contained within a PopUp, and so it bleeds. How can I modify this (without removing the PopUp control) so that the PopUp does not bleed outside of it's containing control?
Popup works differently. It "ignores" its parent and it is added directly into visual root of your app. This is how it can be on-top of everything.
So now it depends on what are you trying to do. I think popup is not suitable for this scenario.
You can try to clip the popup in its template, but I feel that's not what you want.
Since the canvas requires a Top/Left for placement, if you want to center something, is adding a grid at the proper Canvas.Top with HorizontalAlignment="Center" the best way to do it, or is there a better way?
This snip is a 150X300 canvas, with some content centered in a grid ....
<Canvas Width="150" Height="300">
<Grid Canvas.Top="75" Width="106" HorizontalAlignment="Center">
{whatever you want centered}
</Grid>
</Canvas>
Guy's solution works, but you may have to tweak z-order and visibility if you're juggling hit testing.
Another alternative is having the Grid inside the Canvas (as you've specified in your XAML) with the Height/Width set to (or bound to) the Height/Width of the Canvas. Then setting HorizontalAlignment/VerticalAlignment to Center for the contents of your Grid.
I'm not sure if this will meet your exact requirement, but if you put both the canvas and the content inside a grid as peers, it will get you a centered result:
<Grid>
<Canvas Width="150" Height="300"/>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="106" Content="Click"/>
</Grid>