I am trying to add a Backdrop blur in my Windows 10 UWP app, however the blur effect doesn't work. I am using the code from Windows UILabs Github, but the blur effect simply doesn't show. I also tried making my own simplified code, but that didn't work either (didn't throw any exceptions though). In the XAML, I am using
<Grid x:Name="grid_blur" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="0,0,0,55" Height="100" Background="Transparent">
<local:BackDrop BlurAmount="40" TintColor="Red"/>
</Grid>
to add the Backdrop control itself.
I am using VS2015 Community Update 2, project target version is build 14295.
Does anyone have the same problem or am I simply missing something (or should I stop copy & pasting from github?). Thanks in advance.
Don't know UILabs but you can also use Win2D to apply a blur effect. Please check the following article https://www.eternalcoding.com/?p=1911. In next version of UWP SDK, Windows Composition will provide you also a native way to perform Blur, Drop Shadow and Light effects.
Related
I have a WinUI progress ring in my UWP C# XAML app like this
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
<winui:ProgressRing
Width="250"
Height="250"
Foreground="Green"
IsIndeterminate="False"
Maximum="60"
Value="59" />
It looks like this
How do I make it thicker?
As #mm8 said, WinUI ProgressRing is implemented with AnimatedVisualPlayer, and it will load play source in the code behind.
player.Source(winrt::make<AnimatedVisuals::ProgressRingIndeterminate>());
ProgressRingIndeterminate Lottie animation has not provide method to edit thickness. if you do want to this feature, please post your requirement in GitHub, and share link below, I will help to vote up.
For Xamarin.froms I have created a popup :
and I have used ShowPopup to give background to popup so if I click outside poup poup will be closed ,its working fine in xamarin.android but for IOS gesture Rcognizer for Background view is not working if I have a popup on top of Background view
<StackLayout x:Name="ShowPopups" Padding="0" BackgroundColor="#99000000" HorizontalOptions="FillAndExpand" IsVisible="{Binding ShowPopup}" VerticalOptions="FillAndExpand">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OnClosePopupCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
for Background popup in Xamarin.forms..Gesture Recoginizer working fine for background poup for android but for IOS Command="{Binding OnClosePopupCommand} not getting called ..any suggestion to implement it
You probably need to run this command on UI Thread :
Device.BeginInvokeOnMainThread(() =>
{
run your OnClosePopupCommand here
});
You should try not using the Command binding for Xamarin.Forms.Gesture Recognizers, but rather the Tapped event handler. You should be able to make this slight tweak easily. Command has been deprecated and shouldn't be used going forward. Part of this is because gestures work differently between iOS and Android.
It is important to remember that Gestures are fundamentally handled differently between Android and iOS. Xamarin.Android implements gestures by utilizing the IOnGestureListener to access the necessary override where Xamarin.iOS has a UIGestureRecognizer and UIGestureRecognizerDelegate to accomplish the similar.
Ignore Dany DaKur's answer because your code would be running on the UI-Thread. It is safe to assume that the first line of code coming from a UI control event handler (or Command) in Xamarin will be executed on the main UI-Thread. This is because the event handler is ALWAYS invoked from the main UI-Thread (otherwise how would the OS know the user clicked the gesture?).
I hope this helps!
Disclosure: I work for Xamarin/Microsoft
I have a simple Progress Bar where IsIndeterminate="True". It's working fine in WP7 but not in WP8. All I see is one dot that doesn't scroll. I've read how the Progress Bar was included in a Toolkit which I should've used in WP7 for performance issues which I didn't (ooops) but running the app in WP8 shows just 1 dot on the screen. I've upgraded the project to WP8 as apparently the Progress Bar within the SDK is the best one to use yet I still have the problem. My xaml is as follows:
<ProgressBar HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" IsIndeterminate="True"/>
Here is an image showing which reference package the Progress Bar is using from the Toolbox:
https://skydrive.live.com/redir?resid=93AA9A941DD84E76!3185&authkey=!AJOdQz3YPV8xEtY&v=3
Could I possibly be referencing a package that has an older implementation of the Progress Bar?
Any help would be great.
I found the problem. It was because I had my own copy of CustomThemeResources which had a WP7 definition of ProgressBar. I removed it and it works.
How do I change a button's background image in a Metro Style app using VS 2012?
In Windows Forms, a button has a BackgroundImage property that you can set.
Is this feature available for Metro Style apps?
In Windows Forms, I can do the following in C#:
btnImage.BackgroundImage = System.Drawing.Image.FromFile("...\Pictures\flower.png");
How can you programmatically change the button's background image in Metro Style apps ?
Pretty straightforward, actually, just modify the Button's XAML to include a closing tag, and drop an image control in between, like so:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button HorizontalAlignment="Left" Margin="532,285,0,0" VerticalAlignment="Top" Height="135" Width="283">
<Image Source="Assets/Logo.png" />
</Button>
</Grid>
In the snippet above, I'm pointing the image source to the Logo.png file that is part of the built-in templates for C#/XAML apps.
Another way to do it is to open the project in Blend for Visual Studio, drag the image from the Assets tab onto the design surface (making sure you have the desired container selected in the Objects and Timeline pane), and then right-click the image and select Make into Control..., and choose the Button control.
The only downside to this technique is that you don't get the default VisualStates that the built-in Button control has. Instead, Blend defines a style for you with empty VisualStates which you can style as desired.
Hope that helps.
So I got a normal AppBar to work in a C# metro app, but the problem is I need the app to display an html page. I create a WebView that takes up 100% of the width and height of the page, and by doing so, the AppBar doesn't show up anymore on right clicks and edge swipes. Is there a way for the AppBar to work with such a WebView in place?
--Resolved--
What I ended up doing was adding a 1px border around the WebView so that swipes could be detected. Since what I included in my WebView dynamically changes with time, WebViewBrush didn't work out for me. Instead I just shrunk the size of the WebView when the AppBar is opened and then expanded it when it was closed.
Not trying to steal Filip's answer, but I think a few more details are necessary to fully answer the question.
Even with a WebView running full-screen, the AppBar tries to show itself when you right-click or swipe. You can prove this by subscribing to the AppBar.Opened event. What's interesting is that the AppBar appears to somehow know it's obscured and automatically closes itself. Even if it didn't close itself, you wouldn't be able to see it because it's obscured under the WebView.
Filip had the right idea about hiding the WebView and using WebViewBrush while the AppBar is open. You can find a good example of doing that here:
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webviewbrush.aspx
As for when to swap between WebView and WebViewBrush, I'd simply do it on AppBar.Opened and reverse it on AppBar.Closed. AppBar is light dismiss, meaning as soon as you tap anywhere outside of it's client area it will close.
One last word of advice: In my testing it seemed that the swipe gesture was getting swallowed sometimes. That problem seemed to go away when I put a 1 pixel boarder on top and bottom of the WebView. Your mileage may vary.
You need to hide the WebView while displaying XAML UI on top of it and use the WebViewBrush instead.
As suggested above, the 1px border can help with ensuring the top/bottom swipe is honored for the AppBar. However, similar to #matthieu I was still having issues getting the AppBar to open reliably when using the mouse and right-click method.
The issue was that I included the XAML element as a peer to the WebView, rather than as a parent as the MSDN reference for AppBar.Closed suggests:
<Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20">
<Grid>
<WebView x:Name="contentView" Source="http://www.contoso.com"/>
<Rectangle x:Name="contentViewRect"/>
</Grid>
</Border>
If I apply the border this way, the AppBar also reliably opens with the mouse.
One last thing to note is that using a BorderBrush="Transparent" works fine as well, so you don't have to actually see the ugly border. My final XAML was something like:
<Border BorderThickness="0,1,0,1" BorderBrush="Transparent">
<Grid>
<WebView x:Name="WebView"></WebView>
<Rectangle x:Name="RectWebViewBrush"></Rectangle>
</Grid>
</Border>