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.
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 have a wpf application which helps customers choose a paint colour for their house. Please see image and code below.
code behind
private void REDBUTTONPICKER_Click(object sender, RoutedEventArgs e)
{
var brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri(#"c:\users\user1\documents\visual studio 2015\Projects\WpfApplication7\paintpicker\RED.jpg", UriKind.Relative));
REDCOLOURPREVIEW.Background = brush;
}
buttons
<Button x:Name="REDBUTTONPICKER" Content="RED" HorizontalAlignment="Left" Height="65" Margin="46,60,0,0" VerticalAlignment="Top" Width="79" Click="REDBUTTONPICKER_Click">
<Button.Background>
<ImageBrush ImageSource="c:\users\user1\documents\visual studio 2015\Projects\WpfApplication7\paintpicker\RED.jpg"/>
</Button.Background>
</Button>
when the customer clicks review I want the colours picked on the previous page to show in the boxes on the "YOUR CHOSEN COLOURS" page. Please see image below.
The four boxes are buttons.
One way of resolving this is to use the MVVM pattern where each of the chosen colors will be bound to properties on the VM. In the selection of the color, it will also set the current unset chosen color to change.
To get an understanding of MVVM I have written a blog article
Xaml: ViewModel Main Page Instantiation and Loading Strategy for Easier Binding
which can get you started on creating a basic MVVM architecture to work with.
We have a WPF desktop application which needs to show some custom message windows. I am having trouble getting them to be read aloud properly by screen readers such as JAWS from Freedom Scientific.
I want to achieve the same behavior as when showing a system message box. For comparison, System.Windows.MessageBox.Show("my message", "My Caption); is announced by JAWS as "My caption dialog. My message. OK Button". This is perfect.
When my message windows are opened (containing only a TextBlock and OK Button), the window title is announced and the OK button is announced as having focus but the TextBlock message is not announced.
Here's a simple test application which shows the issue. Our real app has icons and other status text, of course.
<Window x:Class="Jaws_MessageBox_Test.MyMessageBox"
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:Jaws_MessageBox_Test"
mc:Ignorable="d"
Title="MyMessageBox" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="mainLabel" Grid.Row="0">Hi there, this is a test to see if JAWS will read the main textbloc when shown.</TextBlock>
<Button Grid.Row="1" Margin="5" HorizontalAlignment="Right" Padding="10,0,10,0" IsDefault="True" x:Name="closeButton" Click="closeButton_Click">_Close</Button>
</Grid>
</Window>
When I show this using:
var mb = new MyMessageBox();
mb.ShowDialog();
The screen reader announces: "MyMessageBox. Close Button" so it's not reading the TextBlock like the system message box does.
What I've found using the Windows SDK inspect and accevent tools is that
The system message box accessibility type is 'Dialog' but the WPF dialog's accessibility type is 'Window'. This might matter. There is no UI Automation Control Type of Dialog https://msdn.microsoft.com/en-us/library/ms749005(v=vs.110).aspx . Is this a bug or limitation in WPF perhaps?
I have tried setting various 'AutomationProperties' attached properties on my window so that the AutomationPeer will have better info but none of those are read when the ShowDialog runs.
Since TextBlock cannot receive input focus, there's no way to even get the text read by tabbing. I temporarily use a read-only TextBox instead to get focus but the experience is still wrong and our blind users should not have to tab around just to have a simple status message read to them.
As part of the experimenting, I also tried creating my own derived AutomationPeer for the message window but none of the Core method content is read automatically when the dialog is launched. The automation child list does have the title bar object listed as the first child whereas that's the last child for the system message box though I don't see a way to change that right now.
I'd greatly appreciate any help for creating a WPF-based custommessage box with full, proper accessibility for blind users.
You have to tell the automation API that your Window is a MessageBox.
To do that add this code to your Window
protected override AutomationPeer OnCreateAutomationPeer()
{
return new MessageBoxWindowAutomationPeer(this);
}
and add this class to your project
public class MessageBoxWindowAutomationPeer : WindowAutomationPeer
{
private const string WC_DIALOG = "#32770";
public MessageBoxWindowAutomationPeer(Window owner)
: base(owner)
{
}
protected override string GetClassNameCore()
{
return WC_DIALOG;
}
protected override string GetLocalizedControlTypeCore()
{
return "Dialogfeld";
}
protected override bool IsContentElementCore()
{
return true;
}
protected override bool IsControlElementCore()
{
return true;
}
}
As we don't need localization in our app "DialogFeld" is the german localized control type. Localizing that one is the part you would have to find out by yourself. ;-)
Set the AutomationProperties.HelpText on the run inside the Textblock
So for Example:
<TextBlock>
<Run Text="aTextString" AutomationProperties.HelpText="ATextString"/>
</TextBlock>
or
<TextBlock>
<Run Text="aTextString" AutomationProperties.HelpText="{Binding Text, RelativeSource={RelativeSource self}}"/>
</TextBlock>
OK from reading around the problem is with Jaws not WPF, as it tends not to read static text on Labels and TextBlocks - strange behaviour.
A workaround might be to use a TextBox, set the BorderStyle = None and place a rectangle on top of it, with fill = White, Opacity = 0.01. This will stop the user being able to focus on the TextBox and means the text will not be static and Jaws should read the text automatically . . .
One thing, does it have to be Jaws that reads the Dialogs that your App pops up?
Have you looked at using system.speech.synthesis.speechsynthesizer to speak the text when the dialog pops up - just a thought!
I don't know if this is correct solution but this works as required on JAWS 18.
<Window ...>
<UserControl>
<StackPanel>
<TextBlock Name="MessageText" ... />
<Button Name="OKButton" ...../>
</StackPanel>
</UserControl>
</Window>
and then focusing the button when window is loaded.
So I wrapped stackpanel inside the usercontrol element.
I just try to simulate a resizing event of a webbrowser. It's because some user who are older and are not able to read that good see the conten in a bigger size. Following a simple version of the code:
<Viewbox x:Name="BrowserView" Stretch="None" >
<phone:WebBrowser Source="www.google.ch" x:Name="Minibrowser" IsScriptEnabled="True" height="644" Width="462" >
</phone:WebBrowser>
</Viewbox>
<Button Content="Resize" Click="Resize" />
Xaml.Code
And in the underlying code file a method which just resizes the webbrowser:
private void Resize(object sender, RoutedEventArgs e)
{
Minibrowser.Width = 800;
Minibrowser.Height = 1400;}
What happens is that the browser is resized. However it's not possible to scroll over the whole content because the webbrowser size is now bigger than the viewbox and screen as well.
Thanks a lot for help and I'm open to listen to other solutions
Have a look at this post about managing the browser-viewport and WP7 WebBrowser control zoom.
Plus, you could also look for "accessibility"...
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! :)