Change colour of overlay area when using Flyout in UWP app - c#

I am using a FlyoutBase in my UWP app. I have set the LightDismissOverlayMode Property to "On". This makes the area outside of the light-dismiss UI to be darkened. Is there any way by which I can choose the colour of the area being darkened?

Is there any way by which I can choose the colour of the area being darkened?
There is FlyoutLightDismissOverlayBackground StaticResource in generic.xaml file, and you could modify it's ResourceKey for changing color in Application.Resources like the following.
<Application.Resources>
<ResourceDictionary>
<StaticResource x:Key="FlyoutLightDismissOverlayBackground" ResourceKey="SystemControlAcrylicElementMediumHighBrush" />
</ResourceDictionary>
</Application.Resources>

Related

Why can't I see fonts in the Visual Studio WPF Designer?

I've been trying to use a TTF font in a WPF UserControl Library. Say I define a resource dictionary containing all of my fonts like this:
FontStyles.xaml
<ResourceDictionary ...>
<FontFamily x:Key="Ubuntu">Fonts/#Ubuntu</FontFamily>
</ResourceDictionary>
And then try to reference them in a master style dictionary, like this:
Styles.xaml
...
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="FontStyles.xaml"/>
...
</ResourceDictionary.MergedDictionaries>
<Style TargetType="TextBlock" x:Key="UbuntuExampleText">
<Setter Property="FontFamily" Value="{StaticResources Ubuntu}">
</Style>
If I then create a TextBlock with that Key, it loads the font correctly when I run my application, however, when I am previewing my UserControl in the Designer, it uses the default font. Is there a way to fix this? I haven't had this issue with images for some reason, just fonts.
I've even tried to keep my Font URIs simple to rule out a formatting issue.

C# UWP Change global app background

I need to change default white background that is showing on the right side when I am resizing the window of UWP application, and I need to do it dynamically.
I have tried:
var newBackground = Application.Current.Resources["ApplicationPageBackgroundThemeBrush"] as SolidColorBrush;
if (newBackground != null)
{
newBackground.Color = newColor;
}
The newBackground is changed, but not affecting the application.
Any help?
If you want to override ApplicationPageBackgroundThemeBrush
Application.Current.Resources["ApplicationPageBackgroundThemeBrush"] = Colors.Red;
For your issue we need to check something in background:
When you check the ApplicationPageBackgroundThemeBrush in the generaic.xaml(To konw what is generaic.xaml you can see here), you will find that ApplicationPageBackgroundThemeBrush is defined three times in "Default","HighContrast" and also "Light". So that when you call request theme all colors will be changed in different themes.
this.RequestedTheme = ElementTheme.Dark
So go back to your question, if you change the request theme to "Dark" you will find that the change color code:
newBackground.Color = newColor;
will not change since there is a default setting for "Dark".(It works for default/Light theme)
And it seems we cannot modify this theme brush at runtime from code behind.
I think the only way for this is to create theme color yourself then change the color by set the element explictly.
To set the theme color. New acrylic document provide a good point for us. Here I write a simple sample for you to show how default theme works:
Create a dictionary and insert the following code:
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="Blue"></SolidColorBrush>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="Yellow"></SolidColorBrush>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
Add it to app.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
To explictly set the element, do something like mygrid.background=xxxx. If you want to trigger it when resize, change the propery in adaptivetrigger.

Is it possible to override one part of a control template in a Telerik WPF theme?

I am using the Telerik Windows 8 theme in my WPF application.  However, I do not like the way the checkbox checked state is indicated using a colored square rather than an actual checkmark as in the Windows 7 theme.  It was very simple to copy the checkbox template and modify it to use the checkbox checkmark from the Windows 7 theme checkbox template.
However, I am having trouble finding a way to add the style that contains this modified template to my Application.Resources in such a way as to apply it to all checkboxes in my application.  For some reason, the template in the Telerik Windows 8 theme continues to be the one that is applied.
I have tried a few different approaches, yet nothing seems to work.  My latest approach is to add the following style to my Application.Resources resource dictionary:
<Style BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Windows8Theme, ElementType=CheckBox}}" TargetType="CheckBox" >
    <Setter Property="Template">
    ....
    </Setter>
</Style>
Does anyone know the answer to this question? Is what I am trying to do possible?
Thanks,
Craig
Make sure you are ferencing the DLLs from the NoXaml folder of your Telerik install
Don't add any reference to any of the Theme DLLs
In your Telerik WPF install location, go into Themes.Implicit > WPF40 > Windows8 > Themes
Put the .xaml files from there into your solution
Reference them in your App.xaml resource dictionary:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/Office2016/System.Windows.xaml" />
<ResourceDictionary Source="Themes/Office2016/Telerik.Windows.Controls.xaml" />
<ResourceDictionary Source="Themes/Office2016/Telerik.Windows.Controls.GridView.xaml" />
etc...
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Now you can go into the System.Windows.xaml file, and find the style for the checkbox and edit the style to change the square to a tick
(I think it's the Rectangle called CheckVisual in the Checkbox Template which you need to change)

Unable to override default style of wpf control in generic.xaml

So we are trying to retemplate some stock wpf controls by changing their default styles in the generic.xaml
When we normally do this we subclass a control and then override the default style key of the subclassed control in its static initializer. However, we are trying to just override the basic control now without subclassing it. That way anyone in the company using the stock wpf control will get our new styling by default.
I can't seem to get this to work though.
In my sandbox application which is a watered down version of our actual problem, I have the following.
MainWindow.xaml
<StackPanel>
<TextBlock>It doesn't work</TextBlock>
<local:CustomTextBlock>It works</local:CustomTextBlock>
</StackPanel>
Themes/Generic.xaml
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="100" />
</Style>
<Style TargetType="{x:Type test:CustomTextBlock}">
<Setter Property="FontSize" Value="100" />
</Style>
CustomTextBlock.cs
public class CustomTextBlock : TextBlock
{
static CustomTextBlock()
{
Type _CustomTextBlock = typeof(CustomTextBlock);
DefaultStyleKeyProperty.OverrideMetadata(
_CustomTextBlock,
new FrameworkPropertyMetadata(_CustomTextBlock));
}
}
Which results in this being displayed.
My theory is that the WPF engine is ignoring our style because the default style key is either A: not overridden or B: is finding their style in their generic.xaml first.
My question is, is there a work around for this? Are my assumptions correct?
UPDATE:
According to reference source, the default style key is overridden in the stock wpf control for TextBlock.cs in this case
Reference Source TextBlock.cs (Line 346)
To accomplish this, you can put your styles either directly into App.xaml or into a separate ResourceDictionary (named DefaultStyles.xaml).
Putting directly into App.xaml is easy enough, just put the style within the Resources element.
If you want to put the styles into a file (this is useful if you want the styles for multiple applications or within multiple assemblies) you add it to the MergedDictionaries of your App.xaml as such
<Application x:Class="MyAwesomeApp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/DefaultStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
This assumes that you put the file DefaultStyles into the Themes folder. If it is in another assembly you would do the following:
<ResourceDictionary Source="/Company.Controls.UI;component/DefaultStyles.xaml"/>
Have a look at this post (What is so special about Generic.xaml).
The main issue seems to be:
WPF looks for the default style in a special resource dictionary in the Themes folder in the same assembly as the control.
'Your' control is defined in 'your' assembly, TextBlock is defined in PresentationFramework. So you better create another ResourceDictionary for re-styling standard controls and include/merge it in each of your xaml documents (I suppose, this hurts).
Hope it helps.

wpf image resources and changing image in wpf control at runtime

I would like to know exactly how to dynamically use a Dictionary Resource in the C# code behind - ie.. I would like to load images at runtime from an image resource within a dictionary
I have a program that has 3 images in a WPF Dictionary - these are images set as image resources.
Then in the code behind of my WPF Window I want to load any one of the three images based on user initiated events.
There is no real code I have to show as nothing that I have done works.
Ideas?
First, make sure you've defined your image resources like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ImageSource x:Key="image1">images/image1.jpg</ImageSource>
<ImageSource x:Key="image2">images/image2.jpg</ImageSource>
</ResourceDictionary>
Secondly, I'm assuming that your WPF dictionary is in its own file. Now you have to make sure you've merged your dictionary into your main window's XAML (skip this step if your resource dictionary is defined inside of the window's XAML). In your window's XAML file, make sure you have something like this:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="myDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Now, in your code-behind, you can use the FindResource() method to locate your image resource by it's key name (the value of the x:Key attribute on the ImageSource in the resource dictionary) like so:
imageControl.Source = (ImageSource)FindResource("image1");
Hope this helps!
This is an addition to the accepted answer:
When working within a ViewModel from MVVM, make sure to use the FindResource from the view where the resource directory is added.
<Window x:Class="My.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModels="clr-namespace:My.ViewModels"
Title="USA Hockey Player Evaluation tool"
Icon="/USAHockeyPlayerEval;component/View/Images/HET.ico"
SizeToContent="WidthAndHeight"
MinHeight="500px" MinWidth="800px">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Images.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Window.DataContext>
<ViewModels:MainWindowMV/>
</Window.DataContext>
<StackPanel>
<Menu>
<MenuItem Header="File">
<MenuItem Header="Save"></MenuItem>
My view in this case is a window (I know not correct MVVM ;-) )
Image img = new Image();
img.Source = (ImageSource)WindowReference.FindResource("Pluse");
Here the WindowReference is a reference to My.MainWindow.

Categories

Resources