I am working on a WP7 app using Location Services and Bing Maps. I would like the Bing Maps control to rotate to always have the current heading at the top. I understand this isn't possible with the Bing Maps Control, so I'm trying to use a Rotation Transform to rotate the entire control.
I'm using the LayoutTransformerOnWindowsPhone assembly found here:
http://blogs.msdn.com/b/delay/archive/2010/08/26/your-phone-can-turn-into-a-robot-layouttransformer-works-great-on-the-windows-phone-platform.aspx
When the page loads, the control gets rotated to the correct heading, but it doesn't keep rotating as the heading changes. Here's my code:
Xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:LayoutTransformer>
<toolkit:LayoutTransformer.LayoutTransform>
<RotateTransform x:Name="mapRotation" />
</toolkit:LayoutTransformer.LayoutTransform>
<my:Map Name="map1" Margin="0,0,0,0" CredentialsProvider="xyz"/>
</toolkit:LayoutTransformer>
</Grid>
cs:
if (Compass.IsSupported)
{
_compass = new Compass {TimeBetweenUpdates = TimeSpan.FromMilliseconds(500)};
_compass.CurrentValueChanged += new EventHandler<SensorReadingEventArgs<CompassReading>>(compass_CurrentValueChanged);
_compass.Start();
}
void compass_ValueChanged(object sender, SensorReadingEventArgs<CompassReading> e)
{
Dispatcher.BeginInvoke(() => UpdateUI(e.SensorReading));
}
private void UpdateUI(CompassReading compassReading)
{
_currentHeading = compassReading.TrueHeading;
mapRotation.Angle = _currentHeading;
}
It sounds like you're running into the Silverlight limitation I discuss in the third bullet point here:
http://blogs.msdn.com/b/delay/archive/2008/07/03/the-layout-system-lies-have-become-a-bit-more-elaborate-layouttransform-functionality-updated-and-enhanced-for-silverlight-2-beta-2.aspx
Unfortunately, they broke the workaround I discuss there:
http://blogs.msdn.com/b/delay/archive/2008/09/29/maintaining-pretenses-with-the-layout-system-layouttransform-functionality-updated-for-silverlight-2.aspx
So I introduced the TransformUpdated method which you should be able to call after updating the RotateTransform for the effect you want.
Also, FYI that there's another way to simplify this somewhat (though it's not necessary in your case) which I discuss here:
http://blogs.msdn.com/b/delay/archive/2009/04/09/a-bit-more-than-meets-the-eye-easily-animate-layouttransformer-with-animationmediator.aspx
And here:
http://blogs.msdn.com/b/delay/archive/2009/04/10/a-bit-more-er-than-meets-the-eye-easily-animate-and-update-layouttransformer-with-animationmediator.aspx
I hope this is helpful! :)
Related
As the code shown, I add a ballpointpen, and it support 30 colors, but not enough.
I got colorSelected(Color type) using some other ways, not discuss here.
Now I want to click ballpointPen, using my colorSelected to draw.
How? Thanks.
<Grid>
<InkToolbar TargetInkCanvas="{x:Bind inkCanvas}" InitialControls="AllExceptPens" VerticalAlignment="Top">
<InkToolbarBallpointPenButton x:Name="ballpointPen" Click="xxx_Click"/>
<InkToolbarCustomToolButton x:Name="toolButtonColorPicker" Click="ToolButton_ColorPicker">
<Image Height="20" Width="20" Source="ms-appx:///Assets/Palette.png"/>
<ToolTipService.ToolTip>
<ToolTip Content="ColorPicker"/>
</ToolTipService.ToolTip>
</InkToolbarCustomToolButton>
</InkToolbar>
<InkCanvas x:Name="inkCanvas" Margin="0,48,0,0"/>
</Grid>
The code below seems not working...
private void xxx_Click(object sender, RoutedEventArgs e)
{
if(bUserDefinedColor)
{
InkDrawingAttributes drawingAttributes = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();
drawingAttributes.Color = colorSelected;
inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
}
}
by the way, I upload the test project to GitHub https://github.com/hupo376787/Test.git
Here is a better solution to your problem, without the need of calling UpdateDefaultDrawingAttributes directly.
What I would do is, whenever the user selects a new color from your ColorPicker and hits OK, add this color to the Palette of the InkToolbarBallpointPenButton, and then set the SelectedBrushIndex to the index of the newly created color.
In way you can completely remove your xxx_Click handler, and replace what's in LeftClick with the following
cpx.LeftClick += (ss, ee) =>
{
bUserDefinedColor = true;
colorSelected = cpx.pickerColor;
ballpointPen.Palette.Add(new SolidColorBrush(colorSelected));
ballpointPen.SelectedBrushIndex = ballpointPen.Palette.Count - 1;
};
This is it! You will see the selected color visual on the pen icon automatically reflects the new color, which gives a great user experience.
Here are two more things you might want to do to further enhance the UX.
Cache the added colors and manually add them back to the Palette at app startup so next time when the user opens the app, they are still available.
Instead of adding another icon to display the ColorPicker, try putting it inside the color popup of the InkToolbarBallpointPenButton so all color related things are in the same place. The control that sits inside this popup is called InkToolbarPenConfigurationControl. You should be able to locate its style (see path below) and add your ColorPicker to it.
C:\Program Files (x86)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.xxxxx.0\Generic\generic.xaml
Hope this helps!
I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn.
Update:
Microsoft has released an official Acrylic material document
Note:
If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.
CREATOR UPDATE
XAML
You need to use a component that you put on the background of your app, let's say a RelativePanel
<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
<!--Having content here, for example textblock and so on-->
</Grid>
The second RelativePanel is used to set the shadow color above the Blur.
.CS
And then you can use the following code :
private void applyAcrylicAccent(Panel panel)
{
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_hostSprite = _compositor.CreateSpriteVisual();
_hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);
ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
_hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;
and calling it with applyAcrylicAccent(MainGrid);
You also will need to handle the SizeChanged event :
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (_hostSprite != null)
_hostSprite.Size = e.NewSize.ToVector2();
}
Of course you will need to be on the Creator Update to run this, the CreateHostBackdropBrush() won't work on a mobile device, or in tablet mode.
Also, consider that the panel or grid that you set with a acrylic color won't be able to display any control (as far I've tested yet). So you need to use your relative panel without any control in it.
Transparent Title bar
The transparency of the title bar could be set using the following code
ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
Here a example of what the above code generate (with some other things added too.)
Fall Update 10.0.16190 and above
As Justin XL mention in an answer below, starting from the Build 16190 and above, developers have access to different Acrylic Brushes located at Windows.UI.Xaml.Media (Acrylic API) and the guidelines from Microsoft : Acrylic material guidelines
In the Creators Update Insider Preview 16193 (along with Windows 10 SDK 16190), there's a new AcrylicBrush that you can apply directly onto your element just like a normal SolidColorBrush.
<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
<Page.Resources>
<media:AcrylicBrush x:Key="HostBackdropBrush"
BackgroundSource="HostBackdrop"
TintColor="LightBlue"
TintOpacity="0.6"
FallbackColor="LightSkyBlue"
FallbackForced="False" />
</Page.Resources>
<Grid Background="{StaticResource HostBackdropBrush}" />
</Page>
Note you can change the BackgroundSource to Backdrop to sample from the app content instead of the content behind the app window. Also make sure you define an appropriate FallbackColor because you will lose the acrylic effect when the app window has lost focus or the device is in battery saver mode.
I'm creating a WPF application that use the Bing Maps. I put it in a page control that at the same time is called from an iframe control. At the begining it displayed the Map and I can zoom in and out without a problem.
The thing is, that when I click the Map with the left button of my mouse what it does is to go down a little bit of the current location and a zoom in is done automatically instead of holding the point where the click was done to do a kind of drag and drop. Just like Google Maps does.
Here is my XAML code:
<Grid x:Name="LayoutRoot">
<TextBlock Text="News page" FontSize="32" />
<m:Map CredentialsProvider="..."
Center="25.6732109,-100.309201" ZoomLevel="12" Mode="Road"/>
</Grid>
I'm using the following assembly reference: xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Does any one know how can I fix it?
Regards!
If you use the mouse up or down events on the Map control this will work fine. The map itself doesn't expose a Click event of it's own, but you don't need that if you use the mouse up/down events.
I had the same problem. The solution was to add a MouseDown Event to the map:
<m:Map
CredentialsProvider="<your Credentials>"
Center="{Binding Center, Mode=TwoWay}"
ZoomLevel="10"
MouseDown="Map_MouseDown">
</m:Map>
In the code behind you can add:
private void Map_MouseDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}
This handles the event and no further processing is done. After this moving and draging the Map worked as usual maps do.
I'm presently using a Windows.UI.Xaml.Controls.FlipView class to display a series of images in a Windows 8 Metro app. In the normal use case, the user can flip back and forth between the images, so a FlipView works wonderfully.
However, there is a specific scenario where the user enters a mode where they can only flip the images forward, i.e. they can't flip backward, until exiting this mode. I've been trying to figure out if there's a simple way to disable flipping backward on a FlipView, but have not found an obvious solution.
Is there a good way to do this using a standard FlipView, or do I have to switch to a different control, or even write a custom one?
What a strange request.
Hopefully, this doesn't seem too simple. It gets the job done in 3 lines!
Here's how (just remove them after they view them):
private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var _ItemsCollection = (sender as FlipView).Items;
foreach (var item in e.RemovedItems)
_ItemsCollection.Remove(item);
}
<Grid Background="Black">
<FlipView FontSize="100" SelectionChanged="FlipView_SelectionChanged">
<x:String>0</x:String>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
<x:String>11</x:String>
<x:String>12</x:String>
<x:String>13</x:String>
<x:String>14</x:String>
<x:String>15</x:String>
<x:String>16</x:String>
<x:String>17</x:String>
<x:String>18</x:String>
<x:String>19</x:String>
<x:String>20</x:String>
<x:String>21</x:String>
<x:String>22</x:String>
<x:String>23</x:String>
<x:String>24</x:String>
<x:String>25</x:String>
<x:String>26</x:String>
<x:String>27</x:String>
<x:String>28</x:String>
<x:String>29</x:String>
</FlipView>
</Grid>
Best of luck!
I'm working on a windows wpf app to do fluid modeling using an open source engine called epanet. There is already an open source UI written in Pascal, we are trying to create one like it with added features and usability.
I want the app to start and have a main window with a couple tool bars and 2 separate sub-windows inside, as in the original epanet UI software (take a look at some of the screen shots in the link below). What is the best way to go about this?
http://engineering.wayne.edu/wsuwater/hydraulics/epanet.php
I tried using "popup" from this forum post:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/bf51e572-b41e-487b-99d0-95262899ef2c/
It was far to finicky and hard to control. Instead, I just created a new window and had it open after the MainWindow() class is loaded.
InitializeComponent();
DrawingArea Init_Canvas = new DrawingArea();
Init_Canvas.Show();
This works great, other than that the user has to manually adjust it to the right size and placement every time.
How do I go about getting it stay tidily tucked in the corner?
I'm not positive I understand the question but it seems like you need to display controls on top of one another. I too ran into problems with popups too and used this code as an alternative:
<Grid>
<Canvas Grid.Row="0" Grid.Column="0">
<TextBlock FontSize="55">One</TextBlock>
</Canvas>
<Canvas Grid.Row="0" Grid.Column="0">
<TextBlock FontSize="55">Two</TextBlock>
</Canvas>
</Grid>
Basically you set both controls to be row=0 and column=0 and they will display on top of one another. Maybe this doesn't meet your needs, but it is a nice trick.