How to put TextBox on top of Camera for Windows Phone - silverlight

This is the camera screen using the Rectangle for Augmented Reality:
<Grid x:Name=”LayoutRoot”>
<Rectangle Width=”640″ Height=”480″>
<Rectangle.Fill>
<VideoBrush x:Name=”ViewFinderBrush” />
</Rectangle.Fill>
</Rectangle>
</Grid>
Questions:
1) How do I place a textbox ontop of the Rectangle?
2) How to place map, pin, image ontop of the rectangle dynamically?
Any link of reference for placing object ontop of the Rectangle such as place a Pin for current Gps location?
Thanks

In XAML, you need to add the TextBox control after the Rectangle declaration in order for it to be in front:
<Grid>
<Rectangle Width="640" Height="480">
<Rectangle.Fill>
<VideoBrush x:Name=”ViewFinderBrush” />
</Rectangle.Fill>
</Rectangle>
<TextBox Height="80" Margin="10,10,0,0"></TextBox>
</Grid>
When placing objects dynamically to the Grid, you add them as children and those will be automatically placed on top of the existing layout. You simply need to make sure that you are setting the proper margins.
For example, if you would need to add another TextBox, you could do this:
TextBox t = new TextBox();
t.Height = 80;
mainRoot.Children.Add(t);
Where mainRoot is the name of the host grid. The same applies to other controls that support the ability to set child controls.

Related

Marquee/Rectangle Selection of buttons in UniformGrid

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

Change the MahApps Metro Split ButtoniIcon size

I'm trying to use the split button control described here:
http://mahapps.com/controls/split_dropdownbutton.html
I'm also using the MahApps resource pack with the icons collection. I want to re-size the control to a height of 40px, but the icon stays to its native height of 76px, resulting in it getting cropped, as shown below.
Any ideas how to get around this?
The SplitButton from MahApps.Metro has a property called IconTemplate. To this property you can assign a DataTemplate and there you can add almost arbitrary content, which will be put in place of the icon itself.
For example you could put a Rectangle control with fixed Height and/or Width. And setting its OpacityMask to your desired icon, will show the icon in smaller size.
In XAML it looks like this:
<controls:SplitButton Orientation="Horizontal">
<controls:SplitButton.IconTemplate>
<DataTemplate>
<Rectangle VerticalAlignment="Center" Height="35" Width="35" Fill="{DynamicResource BlackColorBrush}">
<Rectangle.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_globe}" />
</Rectangle.OpacityMask>
</Rectangle>
</DataTemplate>
</controls:SplitButton.IconTemplate></controls:SplitButton>
controls is the alias for the MahApps.Metro-namespace and may differ in your project.

WPF user control within user control not rendering path

I have a toolbox which is a user control, which has a grid control inside it. Each grid cell is populated by another set of user controls representing each tool. Now each tool has a path with gradient fill representing an icon. The tool user control looks fine in the designer, but when I load the tool into the toolbox nothing shows up. I tried changing the background of the tool and it is reflected in the toolbox. So for some reason the path with the gradient will is not rendered when loaded within another control. Any ideas why?
toolbar
<usercontrol ...>
<local:SettingsButton/>
</usercontrol>
toolbox (SettingsButton)
<usercontrol ...>
<Grid x:Name="LayoutRoot" Background="AliceBlue">
<Path Data="M152.76824,152 ... />
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop.../>
</LinearGradientBrush>
</Path.Fill>
</Grid>
</usercontrol>
Put the control inside a viewbox or else the path wont re-size itself. This helped me.

Magnifing glass in WPF

How can I create a non-circular magnifying glass in WPF? This has to work on controls not just an image. Every example I find online is either circular only or only works on images.
For example I have a slider, and I'd like to turn the thumb into a rectangular magnifying region to show enlarged ticks (as my ticks are displayed in the Slider track itself, not below it). I have created all the styles necessary I am just missing the ability to magnify contents underneath the thumb (as the thumb sits on top of the controls / display)
<Slider Ticks="{Binding MyCollection}" />
Thanks
It's pretty easy to just make your own 'magnifying' control. You could use a VisualBrush with a Visual property taken from the source (that you want to magnify) painted onto a plain Rectangle. See the Using VisualBrush to Show a Magnifying Glass page on the Ian G on Tap website as an example.
Better yet, here is a very simple example of a VisualBrush that is painting a Rectangle in the right column of a Grid, magnifying an Image from the left column of a Grid. You can tweak it to your liking:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Name="Image" Source="Images/BlackLogo.ico" Width="150" Height="150" />
<Rectangle Grid.Column="1">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ., ElementName=Image}"
Viewport="50,100,300,300" ViewportUnits="Absolute" />
</Rectangle.Fill>
</Rectangle>
</Grid>

Why won't my WPF controls scale when my window is maximized via touching the top of the screen in Windows 7?

I have a borderless window created for my WPF application. It resizes perfectly on the sides and corners and also when I drag it to the left or right side of the screen it perfectly scales to fit half the screen. If I use a button or other control event to maximize the window it works perfectly. However, when I drag the window to the top of the screen, the actual window maximizes but the grid inside it does not.
I have it set up to call a method on the sizeChanged event that sets the size of the grid relative to the window (it fills the entire window except 10 pixels on each edge). At first, I thought the sizeChanged event wasn't firing so I created a thread to just detect if the windowState was maximized. On detection it would simply run the method to size up the grid. The method ran, but the grid size didn't change. Only this method of maximization is a problem.
How do I fix this problem?
Edit: XAML
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF868686" Offset="0" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>
</Window.Background>
<Grid Background="{x:Null}" Name="baseGrid">
<Grid Height="342" HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" Width="718" Background="#46BA0000">
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="6,6,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="maximize" />
</Grid>
</Grid>
I'm also using a style and a theme in my application but this problem happens even when they aren't involved so i didnt include them in the XAML
One solution you can try is to put VerticalAlignment="Stretch" and HorizontalAlignment="Stretch" on your grid control
Other solution is to use e.NewSize.Width and e.NewSize.Height to calculate the grid height and width on Window's SizeChanged event handler.

Resources