Metro modal flyout disables itself - xaml

I have used metro mahhapps flyout like this:
<Grid>
<Controls:FlyoutsControl>
<Controls:Flyout IsModal="True" IsOpen="True" Header="Flyout" Position="Right" Width="200">
<!-- Your custom content here -->
</Controls:Flyout>
</Controls:FlyoutsControl>
</Grid>
and it disables everything, even itself - I can not close it, nor can I close my application.
Am I doing something wrong?

The Flyouts container must be located on MetroWindow level.
<Controls:MetroWindow.Flyouts>
<Controls:FlyoutsControl>
<Controls:Flyout IsModal="True" IsOpen="True" Header="Flyout" Position="Right" Width="200">
<!-- Your custom content here -->
</Controls:Flyout>
</Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>

Related

Implementing TeachingTip control for a UWP App

To install the TeachingTip-control in my UWP app, I've done the following stepts:
installed Microsoft.UI.Xaml package via Nuget in my project
Added <XamlControlsResources xmlns = "using:Microsoft.UI.Xaml.Controls" /> into App.xaml.
Imported Namespace xmlns:controls="using:Microsoft.UI.Xaml.Controls"
I implemented the TeachingTip-control as follows:
<Button x:Name="BackButton"
Background="{x:Null}"
Content="Back"
Click="BackButton_Click">
<Button.Resources>
<controls:TeachingTip x:Name="ToggleThemeTeachingTip"
Target="{x:Bind BackButton}"
Title="Change themes without hassle"
Subtitle="It's easier than ever to see control samples in both light and dark theme!"
CloseButtonContent="Got it!">
</controls:TeachingTip>
</Button.Resources>
</Button>
<Button x:Name="TeachingTipButton"
Click="TeachingTipButton_OnClick">
</Button>
private void TeachingTipButton_OnClick(object sender, RoutedEventArgs e)
{
ToggleThemeTeachingTip.IsOpen = true;
}
When I call the function I get the following DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION error (probably UI error), which I do not understand:
What could be the problem? Why does not my code work?
Edit:
I have now determined that the error is due to App.xaml. After I've installed the Nuget package Microsoft.UI.Xaml, it's expected to add the following code in App.xaml:
But I have already in App.xaml other settings and resources:
When I try to add only the line in App.xaml a key error occurs:
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
If I give the resource entry a key like this:
<XamlControlsResources x: Key = "XamlControlsResources" xmlns = "using: Microsoft.UI.Xaml.Controls" />
 It comes to a completely different error:
Windows.UI.Xaml.Markup.XamlParseException: "The text for this error is not found.
Can not find a Resource with the Name / Key TeachingTipBackgroundBrush
How can I properly add the resource <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> correctly in my App.xaml?
Your App.xaml file needs to look like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</ResourceDictionary.MergedDictionaries>
<!-- Other styles here -->
<Style TargetType="Button">
...
</Style>
</ResourceDictionary>
</Application.Resources>
I pasted your code into my project and it worked. However, the code you provided above doesn't have Content for the triggering button, so the only button which appears is the top button. Are you sure you're not failing because of code in BackButton_Click rather than TeachingTipButton_OnClick?
You can remove the duplicate reference to Microsoft.UI.Xaml.Controls from Application.Resources
I solved my problem by removing ContentDialog Size style and Default Button style so that <Application.Resources> has only <XamlControlsResources x: Key = "XamlControlsResources" xmlns = "using: Microsoft.UI.Xaml.Controls" /> as a single entry. In my case, multiple entries in <Application.Resources> </Application.Resources> are unfortunately not accepted.

UWP The attachable property 'Resources' was not found in type 'Style'

In ResourceDictionary file I have a style and I try to add few resources to that style. Unfortunately, the member Resources is not recognized or is not accessible. I need keep resources explicitly within a style.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestProject.Resources">
<Style>
<Style.Resources> <!--Style doesn't like it here-->
Uwp's style seems to doesn't like it. Is there any equivalent or sufficient workaround? Or I am doing something completely wrong.
Style does not have Resources property (see documentation). Controls and visual elements do. If you want to add resources, you can add them either under a control, all on the same level as the Style element:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestProject.Resources">
<SolidColorBrush x:Key="MyBrush" ... />
<Style>
<!-- use MyBrush in this style -->
If you define resources on the same level as the Style they will be unfortunately available globally, but that is similar how the default UWP styles are defined in the default XAML resource dictionaries (generic.xaml).

Xamarin Forms image binding on url with default on embedded resource

i have a Xamarin ListView with images from internet. I would to show a default image (from embedded resource), and, when present, the image from an url.
I've tryied with this code but works only with UriImageSource, not for the embedded resource:
<ListView ItemsSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Image>
<Image.Source>
<!-- does not works
<ImageSource>
{utils:ImageResource Namespace.Assets.img-placeholder.png}
</ImageSource>
-->
<UriImageSource Uri="{Binding ImageUri}"></UriImageSource>
</Image.Source>
</Image>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
if i use
<Image Source="{utils:ImageResource Namespace.Assets.img-placeholder.png}" />
this works showing the embedded resource default image
The model:
public Uri ImageUri => Image != null ?
new Uri($"http://www.example.com/{Image}")
: null;
Any help? Thanks
You can use FFImageLoading library.
According to its documentation:
LoadingPlaceholder
ImageSource property. If set, a loading placeholder is shown while
loading. It supports UriImageSource, FileImageSource and
StreamImageSource.
ErrorPlaceholder
ImageSource property. If set, if error occurs while loading image, an
error placeholder is shown. It supports UriImageSource,
FileImageSource and StreamImageSource.
You don't have to make it that complicated. From your viewmodel you simply provide a string ImageUri and bind it to Image.Source
<Image Source="{Binding ImageUri}" />
this works for images from the web as well as resources, but they have to live in your platform projects. For Android you'll have to put them to Resources\drawable (or the respective folders for other resolutions) and set the build action to AndroidResource, for iOS to Resources (in different sizes with the #2x, #3x suffices, e.g. img-placeholder#2x.png) and set the build action to bundle resource. You can now set the placeholder from your viewmodel:
if(!HasRemoteImage(response))
{
ImageUri = "img-placeholder.png";
}
Xamarin.Forms will create the ImageSource automatically for you.
One main advantage over resources you load directly is, that you don't have to care which image is the right one for the current resolution. Xamarin/Xamarin.Forms does that automatically for you.

XAML MediaElement Play() method not working in code

Hi I have a Windows Phone app with a MediaElement window defined in XAML to play a video file:
<MediaElement x:Name="mediaWindow" MediaEnded="mediaWindow_MediaEnded" Stretch="UniformToFill" HorizontalAlignment="Left" Height="225" Margin="15,127,0,0" VerticalAlignment="Top" Width="450" AutoPlay="True"/>
When I call this in C# code it play fine:?
mediaWindow.Source = new Uri(loc, UriKind.Relative);
But something strange is happening eg when the user navigates to a new page a MediaElement on that page should kickin and play an audio file but I doesn't. If I comment out the code above which play the video then the audio file on the navigated to page works OK.
I've tried using in XAML:?
<MediaElement x:Name="mediaWindow" MediaEnded="mediaWindow_MediaEnded" Stretch="UniformToFill" HorizontalAlignment="Left" Height="225" Margin="15,127,0,0" VerticalAlignment="Top" Width="450" AutoPlay="False"/>
and in C#:
mediaWindow.Source = new Uri(loc, UriKind.Relative);
mediaWindow.Play();
But this just shows a black screen!?
These is another MediaElement defined in XAML on the original page which I use to play an audio file, could this be the problem? If so what can I do to play the audio file and a video file on the same page? I've read I could use MediaPlayer for the audio file but I tried defining that in c# code but it does not exixt in namespace even though I have included:
using System.Windows.Media;
This is driving me crazy, new to C#, help appreciated here.
Many thanks
Did you try giving the source of the video within the XAML? and make the AutoPlay to false.
<MediaElement x:Name="mediaSimple"
Source="Videos/video1.mp4"
Stretch="UniformToFill" AutoPlay="False"/>
and give the mediaSimple.Play() within a button click event handler.

Windows Phone ApplicationBar BackgroundColor property style XamlParseException

I had a lot of pages in my application and I had decided to make a global ApplicationBar style in App.Resources:
<Style TargetType="shell:ApplicationBar">
<Setter Property="BackgroundColor" Value="#006699" />
</Style>
However, when I tried to start the app, VS gave me an error:
The property 'BackgroundColor' was not found in type 'Microsoft.Phone.Shell.ApplicationBar'.
This isn't true - ApplicationBar.BackgroundColor Property. What's the problem?
I believe, ApplicationBar properties cannot use Binding or styling the way you're trying, as it is not a silverlight control. Although you can put the whole applicationbar as a resource. Like so
<shell:ApplicationBar x:Key="MyAppBar" IsVisible="True" BackgroundColor="#006699">
<shell:ApplicationBarIconButton IconUri="/Images/image.png" Text="image" IsEnabled="True"/>
</shell:ApplicationBar>
EDIT:
Or you could just put this in the resource if you want your application bar color to change.
<shell:ApplicationBar x:Key="MyAppBar" IsVisible="True" BackgroundColor="#006699">
</shell:ApplicationBar>
And add buttons from code behind. although, I haven't come across a scenario where this would help.