I try the following code which is almost the same than example code on Microsoft web site. Only change is that I changed first Rectangle to Ellipse.
<Grid>
<Grid.Resources>
<ThemeShadow x:Name="SharedShadow" />
</Grid.Resources>
<Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
<Ellipse x:Name="Ellipse1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
<Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>
Here is the simple C# code behind:
SharedShadow.Receivers.Add(BackgroundGrid);
Ellipse1.Translation += new Vector3(0, 0, 16);
Rectangle1.Translation += new Vector3(120, 0, 32);
Shadows appears on the screen but shadow connected to Ellipse element is still shape of rectangle. So , is it so that this new class support only Rectangle shapes like Dialog, Grid, StackPanel (without any CornerRadius) etc. but not any other shapes like Ellipse, Text etc.
Related
I'm currently migrating a project from Windows Phone 8.1 to UWP, and I'm having problems with a XAML line that doesn't rotate when renderTransform compositeTransform rotation in code, but happens in if change is made in XAML. In Windows Phone 8.1 it worked without any problem.
Here's XAML part:
<Maps:MapControl
<Line x:Name="mapLineMilestoneHelper"
Stroke="Black" StrokeThickness="2" Opacity="1.0" StrokeDashArray="2,2"
RenderTransformOrigin="0.5, 0.5"
X1="0" Y1="-1000" X2="0" Y2="1000" Visibility="Collapsed">
<Line.RenderTransform>
<CompositeTransform x:Name="lineMilestoneHelperAzimuth" Rotation="90.0"/>
<!--<RotateTransform x:Name="lineMilestoneHelperAzimuth"
CenterX="0.5" CenterY="0.5" Angle="0"/>-->
</Line.RenderTransform>
</Line>
</Maps:MapControl
This line is drawn inside a Map Control. And then changed in code (but veen I change Rotation value to 0 it doesn't rotate.
Here's the C# code that should rotate the XAML line above:
lineMilestoneHelperAzimuth.Rotation = azimuth;
As you have seen, I've tried with RotateTransform also, but it didn't work.
Any idea why it happens?
Thank you
According to https://learn.microsoft.com/en-us/windows/uwp/maps-and-location/display-poi#add-a-line you can add lines to a map from code.
I assume that this is because that way you can specify the locations of the elements by their location on the map (perhaps in geo coordinates) so they move with the map when panning and zooming the map.
Another approach, if you are looking for an overlay kind of setup (like a Heads Up Display): nest the map in a Grid and put the line as a sibling to the map in the grid:
I made a minimal working example. Notice the changed line coordinates and setting Visibility to Visible instead of Collapsed to bring the line into view and make it visible. I also used a hard-coded brush and line thickness.
<Page xmlns:my="using:Windows.UI.Xaml.Controls.Maps"
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<my:MapControl/>
<Line x:Name="mapLineMilestoneHelper"
Stroke="Aqua"
StrokeThickness="5"
Opacity="1.0"
StrokeDashArray="2,2"
RenderTransformOrigin="0.5, 0.5"
X1="0"
Y1="0"
X2="700"
Y2="500"
Visibility="Visible">
<Line.RenderTransform>
<CompositeTransform x:Name="lineMilestoneHelperAzimuth"
Rotation="90.0" />
<!--<RotateTransform x:Name="lineMilestoneHelperAzimuth" CenterX="0.5" CenterY="0.5" Angle="0" />-->
</Line.RenderTransform>
</Line>
<Button Content="Button"
HorizontalAlignment="Left"
Margin="64,80,0,0"
VerticalAlignment="Top"
Click="Button_Click" />
</Grid>
</Page>
And in code-behind:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
lineMilestoneHelperAzimuth.Rotation = 45;
}
}
If you want to draw a line on the map in geographic coordinates that moves with the map, it's recommended to use a MapPolyine rather than XAML
https://learn.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.Maps.MapPolyline
It will perform better and stick to the map beter (XAML tends to drift relative to the map).
I have a question about a WPF zooming question. This question is really about a Kinect application, but I have tried to generalise it here.
I have the following XAML:
`<Window x:Class="RenderTransformViewboxTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RenderTransformViewboxTest"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="borderContainer" ClipToBounds="True">
<Viewbox x:Name="contentViewbox">
<Grid>
<Image x:Name="imageMoose" Source="Images\Moose.jpg" />
<Canvas x:Name="canvasContainer">
<Rectangle x:Name="TestRectangle" Height="600" Width="200" Canvas.Left="250" Canvas.Top="150" Stroke="Black" Fill="Yellow" Opacity="0.5" />
</Canvas>
</Grid>
</Viewbox>
</Border>
<StackPanel Grid.Column="1">
<Button x:Name="btnZoomToRectangle" Content="Zoom to Rectangle" Click="btnZoomToRectangle_Click" />
</StackPanel>
</Grid>
This looks like this:
I am having trouble writing the correct code to:
Scale the whole Viewbox (the canvas and image) inside the border until the rectangle appears to be at the full height of the border control.
Then, translate the whole Viewbox (the canvas and image) inside the border so that the rectangle appears to be in the centre of the border control.
Since translating the Viewbox may introduce "gaps" on the left/right of the border, I'd like to trim the other side somehow so that there is an equal amount of image on the left and the right hand side of the rectangle.
The result of these steps should make the screen look like this:
Notice how that because the image was translated right, we introduced a gap at the left hand side of the frame. As per requirement 3, I introduce the same amount of gap on the right hand side.
(I apologise for my skills with Paint here).
I've been banging my head against a wall with this for ages and am having trouble. I have sort of managed to scale the image applying a Matrix Transform in the centre of the image but can't seem to do much else with it after! Any help would be gladly appreciated.
I am working on a C#/XAML Universal Windows store app and I need to plot a custom control on a Bing map control. The problem is I cannot find any method to modify the anchor point which is by default Point(0,0) which anchor the control to upper left corner. I need something equivalent to MapControl.SetNormalizedAnchorPoint in Windows Phone. I believe it is possible since the Bing Maps app controls has an anchor point at the bottom left corner. How is it done?
Edit:
Here's what my custom control looks like. What I want is for it to anchor to the location at the bottom left corner (blue circle) instead of the default top left (red circle).
Here what it looks like on the map control where it achors to the red circle instead of blue.
And here's my code behind
public void AddPushpin(BasicGeoposition location, string title, string subtitle = "")
{
var pin = new PinControl(title, subtitle);
pin.ApplyTemplate();
pin.UpdateLayout();
MapLayer.SetPosition(pin, location.ToLocation());
_pinLayer.Children.Add(pin);
}
Here's the lengthy XAML
<UserControl x:Class="ToulouseUniversal.CustomControls.PinControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ToulouseUniversal.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="200">
<Grid>
<Grid x:Name="LayoutRoot"
VerticalAlignment="Bottom">
<Polygon x:Name="labelPointer"
Points="0,0 0,0.5 15,15.5 15,0"
Margin="-15,0,0,0"
Grid.ColumnSpan="2"
Fill="{StaticResource TisseoBrush1}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Polygon Points="0,0 0,0.5 15,15.5 15,0"
Margin="-15,0,0,0"
Grid.ColumnSpan="2"
Fill="Black"
Opacity="0.3"
HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Grid Margin="-15,0,0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Height="4"
VerticalAlignment="Bottom"
Margin="14.5,-1,0.5,-3.5"
Grid.ColumnSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="labelGrid"
Fill="{StaticResource TisseoBrush1}"
RadiusX="0"
RadiusY="0"
Grid.ColumnSpan="2"/>
<Rectangle Fill="White"
Opacity="0.2"
Width="3"
HorizontalAlignment="Left" />
<Rectangle Fill="White"
Grid.ColumnSpan="2"
Opacity="0.2"
Width="3"
HorizontalAlignment="Right" />
<Grid>
<BitmapIcon UriSource="ms-appx:///Assets/Icons/appbar.transit.bus.png"
Width="40" />
</Grid>
<StackPanel Grid.Column="1">
<TextBlock x:Name="labelTitle"
Text="A stop"
Margin="6,3,9,0"
Foreground="White"
TextWrapping="Wrap"
MaxWidth="180"
FontSize="20"
FontWeight="SemiBold" />
<TextBlock x:Name="labelSubtitle"
Text="connecting"
Margin="6,0,9,6"
Foreground="White"
TextWrapping="Wrap"
FontSize="12"
MaxWidth="180"
FontWeight="Light" />
</StackPanel>
</Grid>
</Grid>
</Grid>
Depending on what you're trying to achieve, it might be interesting to share more of your XAML code or at least the part of the code were you're creating the pushpin object as well as the associated option.
Anyway, in order to control the anchor, it might be interesting to be able to use custom control as a pushpin so basically, if you're using a Grid as the root control representing the pushpin, you can work to display multiple things and also work with the margin on children controls to move them in the Grid.
If you look at the article here, you will see how it can be done:
http://blogs.msdn.com/b/bingdevcenter/archive/2014/06/24/using-maps-in-universal-apps.aspx
See the interesting part of the code is:
public void AddPushpin(BasicGeoposition location, string text)
{
#if WINDOWS_APP
var pin = new Pushpin()
{
Text = text
};
MapLayer.SetPosition(pin, location.ToLocation());
_pinLayer.Children.Add(pin);
#elif WINDOWS_PHONE_APP
var pin = new Grid()
{
Width = 24,
Height = 24,
Margin = new Windows.UI.Xaml.Thickness(-12)
};
pin.Children.Add(new Ellipse()
{
Fill = new SolidColorBrush(Colors.DodgerBlue),
Stroke = new SolidColorBrush(Colors.White),
StrokeThickness = 3,
Width = 24,
Height = 24
});
pin.Children.Add(new TextBlock()
{
Text = text,
FontSize = 12,
Foreground = new SolidColorBrush(Colors.White),
HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center,
VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center
});
MapControl.SetLocation(pin, new Geopoint(location));
_map.Children.Add(pin);
#endif
}
Here is a nice blog post solving your problem to simulate the anchor-point in custom control for Bing Maps.
The most interesting part:
In the XAML Bing Maps controls the easiest way to offset a pushpin or custom
UIElement that is being overlaid on the map like a pushpin is to specify
a negative margin value on the pushpin or UIElement
In your case it would be sufficient to apply the negative margin on the LayoutRoot Grid.
I need transparent text with opaque background with WPF/XAML. Is that possible?
Here is an example, but I don't use css: css, transparent text with opaque background
Maybe there is a manner in order to produce transparent text with opaque background with c#?
The background should be an Image, I tried it with a Canvas:
<Grid>
<!-- shows only a black box, but should show red text on black background-->
<Canvas Width="100" Height="20" Background="Red"/>
<TextBlock Text="My text" Foreground="#00000000" Background="#FF000000"/>
</Grid>
You can set it using the Opacity property on the SolidColorBrush. It takes values from 0 to 1. Where 0 is complete transparency and 1 complete opacity. But if you set the text transparent then what you will see is the background of the text box. In the example I've set partial opacity so you can see the text is greyish.
<TextBlock Text="Test" Background="Red" Width="100" Height="100">
<TextBlock.Foreground>
<SolidColorBrush Opacity="0.25" Color="Black"/>
</TextBlock.Foreground>
</TextBlock>
Other thing to get the transparency and see the background of the control beneath the text block is to set transparent foreground and partially transparent background.
U can make this by converting your text to Path and then Make Clipping On your white Rectangle with that Path.
Try this:
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox x:Name="textToMask" TextChanged="textToMask_TextChanged" />
<Rectangle Grid.Row="1" x:Name="target" Fill="Yellow"/>
</Grid>
c# code
private void textToMask_TextChanged(object sender, TextChangedEventArgs e)
{
Typeface face = new Typeface("Candara");
FormattedText tx = new FormattedText(textToMask.Text, Thread.CurrentThread.CurrentUICulture, FlowDirection.LeftToRight, face, 70, Brushes.Black);
Geometry textGeom = tx.BuildGeometry(new Point(0, 0));
Rect boundingRect = new Rect(new Point(-100000, -100000), new Point(100000, 100000));
RectangleGeometry boundingGeom = new RectangleGeometry(boundingRect);
GeometryGroup group = new GeometryGroup();
group.Children.Add(boundingGeom);
group.Children.Add(textGeom);
target.Clip = group;
}
I have a ScatterView that contains an image over which I should be able to draw.
<s:ScatterView HorizontalAlignment="Center" Margin="0,0,0,0" Name="desk" VerticalAlignment="Center">
<s:ScatterViewItem Width="200" Height="200">
<Grid>
<Image Name="img1" Source="/Resources/Desert.jpg"/>
<Viewbox>
<s:SurfaceInkCanvas Name="cvs1"/>
</Viewbox>
</Grid>
</s:ScatterViewItem>
</s:ScatterView>
I noticed that whenever I draw an ink trail towards the border of the image, the strokes on the ink canvas are scaled down to make room for more stuff. I do not want these strokes to be zoomed out. How can I change this behavior?
Here is a video that shows what's going on.
I figured it out. This behavior is caused by the fact that I hadn't defined a Width and Height on the SurfaceInkCanvas. This should do the trick:
<s:SurfaceInkCanvas Name="cvs1" Width="200" Height="200" />