Why UWP ApplicationPageBackgroundThemeBrush is always white? - xaml

I am beginner. I have below simplest code:
<Page
x:Class="ClientFramework.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClientFramework"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
I test it in Windows mobile 10 emulator. No matter how I change OS theme, dark or light, my app's background is always white. So what is correct way to set theme-dependent app-wide colours?

I eventually find out the problem by googling about. The problem is caused by the VS2015 project template. In app.xaml, there is a line to set RequestedTheme="Light". I removed the line and things are fine now. Wasted me 2 hours. Hope you see my answer and therefore save time.
https://social.msdn.microsoft.com/Forums/vstudio/en-US/c12cdba4-093f-474a-9d21-6e447aaa2adf/uwp-applicationpagebackgroundthemebrush-is-always-white?forum=wpdevelop

Set the background on the <Grid> element, like so:
<Grid Background="Blue"></Grid>
For your foreground text, you can set a default style in App.Xaml like so:
<App.Resources>
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Red" />
</Style>
</App Resources>
As long as you're setting styles on element names and not on named things, the style will apply to all elements of that type.
You can also inherit styles to repeat commonly used styles.

Related

Prevent Page Expanding Frame in Windows 8 XAML App within ScrollView

I'm creating a basic application to test some functionality in a XAML based Windows 8 app.
I have created the following structure to simplify my example but in the real app it'll be more complex:
<Page
x:Name="pageRoot"
x:Class="ScrollingTest.Xaml.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScrollingTest.Xaml"
xmlns:common="using:ScrollingTest.Xaml.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden" Margin="0,0,0,10" VerticalContentAlignment="Stretch" BorderBrush="#FF0BC8FF" BorderThickness="1" Grid.Row="1" >
<Frame Content="Frame" Name="theFrame" Margin="100" Width="3000" BorderBrush="Red" BorderThickness="1"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
</Grid>
</Page>
The page, which is loaded into the Frame is of variable height (it contains a listview).
The issue is that as the height of the sub-page increases, so does the height of the ScrollViewer, meaning that the content is forced off the bottom of the screen.
What I'd want to achieve is horizontal scrolling for the parent but then use vertical scrolling on the sub-page. In the real application there will be many sub-pages, probably within a grid.
It seems that putting the frame inside a ScrollViewer breaks the frame's internal scrolling capabilities.
If anyone could let me know of either a better way to achieve my end result or of some property I need to change then I'd be very grateful.
I ended up using the solution from the following comment:
XAML: Limiting size of control nested in ScrollViewer (to scroll nested within the ScrollViewer)
Height="{Binding ElementName=scrollViewer, Path=ActualHeight}"
Not really what I wanted as this doesn't cope automatically when changing the orientation but it will have to do.
The other option is to handle the SizeChanged event of the page and update the height from the event handler (theFrame.Height = scrollViewer.ActualHeight). That way it copes with changing the orientation as well.

How to remove EntranceThemeTransition from a single object in a Windows 8 App?

It seems like every object that has been added to a page in a Windows 8 App gets this "slide from right to left"-entrance-transition which begins whenever someone navigates to the page.
Is there a possibility to remove single objects from this transition?
Neither
<Object.Transitions>
<TransitionCollection />
</Object.Transitions>
nor this thread helped...
Any ideas?
AFAIK There's no way to exempt a given object from the transitions applied by it's parents. The only thing I can suggest is to structure your xaml in such a way that the transition isn't applied. By this I mean having this special item in a panel that has no children transitions while the rest of the page is in a panel with a child transition. Depending on where this item is it could be very easy or difficult as hell.
As Nigel suggested, the only solution I have found has been to change the page structure and put the elements out of the grid that has the animations:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Transitions>
<TransitionCollection/>
<!-- Ensure no transitions in background -->
</Grid.Transitions>
<TextBlock FontSize="50" Margin="50">This item is not animated</TextBlock>
<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<!-- add transitions here -->
<EntranceThemeTransition FromVerticalOffset="1500" FromHorizontalOffset="1500"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<TextBlock Margin="50,100" FontSize="50">This item is animated</TextBlock>
</Grid>
<TextBlock FontSize="50" Margin="50,150">Another not animated item</TextBlock>
</Grid>
</Page>

In XAML, is it possible to define a global constant style without specifying the TargetType

I would like to define my logo color as a style then apply that color wherever. Something like this:
<Style x:Name="LogoBlue">
<Setter Property="Background" Value="#607C8C" />
</Style>
<TextBlock Background="{StaticResource LogoBlue}">Blah Blah</TextBlock>
Is it possible to define a color constant as a static resource?
Define a brush as a resource in your App.xaml, then you can refer to it by its key.
As the colour is a fixed colour the PresentationOptions allows more efficient use of the brush as you will not change it's colour.
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions"
StartupUri="MainWindow.xaml">
<Application.Resources>
<SolidColorBrush x:Key="LogoBlue" Color="#607C8C" PresentationOptions:Freeze="True"/>
</Application.Resources>
</Application>

Change Background Color For All Pages WP7

Is there a way to change the background color for all pages? Or do I just have to change the LayoutRoot color on every page?
What you can do is create a Style that applies the Background Colour, you would still need to apply the style to each page, but afterwards if you need to make more changes you'll just need to alter the Style.
An example style applied to a page can be seen at Using Styles and Resources to simplify your xaml while this doesn't include background it should be easy enough to follow.
You could create a base page class and set the background color in that then inherit from the base page in all your other pages.
Edit
Base page code:
public class BasePage : PhoneApplicationPage
{
public BasePage()
{
Background = new SolidColorBrush(Colors.Red);
}
}
Main page xaml. Note the grid binds to the background color of the page.
<WindowsPhoneApplication2:BasePage
x:Class="WindowsPhoneApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:WindowsPhoneApplication2="clr-namespace:WindowsPhoneApplication2"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape"
Orientation="Portrait"
shell:SystemTray.IsVisible="True"
x:Name="root">
<Grid
x:Name="LayoutRoot"
Background="{Binding Path=Background, ElementName=root}">
</Grid>
</WindowsPhoneApplication2:BasePage>
I have found a solution.
The issue is relying in how Mango defines the background color for pages.
The only way around it is to use application wide styles and apply it to the pages.
Here is a good howto: Windows Phone Mango Custom application Theme Step by Step
Following those suggestion I was even able to change the colors dynamically.
Adding following to the application resources sets color on all pages.
<Style TargetType="phone:PhoneApplicationFrame">
<Setter Property="Background" Value="{StaticResource SomeBrush}"/>
</Style>

Control Inheritance with Blend in Silverlight 3

i would like to create a custom base class for some of my UserControls.
Doing this in VS2008 is fine and compiles as expected, but when i edit the control in Blend 3 the base class in the blabla.g.vb is always changed back to System.Windows.Controls.UserControl.
How can i force Blend to keep the assigned base class?
regards
Christoph
Can you show your XAML?
I suspect the case is your XAML is like this:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SilverlightApplication15"
x:Class="SilverlightApplication15.MainPage"
Width="640"
Height="480">
<Grid x:Name="LayoutRoot"
Background="#FF313131" />
</UserControl>
When it should be something like:
<local:BlahBlah xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SilverlightApplication15"
x:Class="SilverlightApplication15.MainPage"
Width="640"
Height="480">
<Grid x:Name="LayoutRoot"
Background="#FF313131" />
</local:BlahBlah>
The .g.vb file is generated from the XAML so it's not a file you should edit directly.