I am writing my first Win 8.1 App and I am trying to set background image for Hubapp Layout.
I can see the background in the preview, but once I run the application it became black background.
Here is my code:
<Grid x:Name="LayoutRoot">
<Hub x:Name="Hub" x:Uid="Hub" Header="The Header">
<Hub.Background>
<ImageBrush Stretch="None"
ImageSource="Assets\background.png"
AlignmentY="Top" AlignmentX="Center"/>
</Hub.Background>
</Hub>
</Grid>
I tried also to set the background using ThemeResource but I got the same result only black background
<Grid x:Name="LayoutRoot">
<Hub x:Name="Hub" x:Uid="Hub" Header="The Header">
Background="{ThemeResource HubBackgroundImageBrush}"> </Hub>
</Grid>
here is the Resources code
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<ImageBrush x:Key="HubBackgroundImageBrush" ImageSource="Assets\background.png"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<ImageBrush x:Key="HubBackgroundImageBrush" ImageSource="{x:Null}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Would you please tell what is wrong?
Just looked into this and it appears the background of the hub doesn't appear until a HubSection is added.
If I try
<Hub x:Name="hub" Background="Red">
</Hub>
No Background appears despite the Hub appearing to stretch to the whole screen
but if I add a HubSection
<Hub x:Name="hub" Background="Red">
<HubSection></HubSection>
</Hub>
Red Background appears.
Related
I have main page:
<Page >
<Grid>
<SplitView PaneBackground="Transparent" x:Name="mySplitView" DisplayMode="Overlay" IsPaneOpen="{Binding IsOpenMenu, Mode=TwoWay}" OpenPaneLength="320">
<SplitView.Pane>
...
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Frame x:Name="frame"
Margin="0,0,0,0">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<EntranceNavigationTransitionInfo/>
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
</Page>
In Frame i load other page. Example Page1.
In Page1 set background:
<Page Background="Red" >
</Page>
And this not working? Background is not Red. Why?
Your second Page needs content. Try this:
<Page Background="Red">
<Grid/>
</Page>
Typically for Pages and UserControls, you would actually set the Background of the content root element instead of the element itself:
<Page>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
EDIT
I ran the app in the mobile emulator instead of the local machine and can reproduce your issue. All I can suggest is that you set the background on the content root element instead of the page, as I mentioned above.
This question shows how to substitute PivotItem headers text with images, but I wish to have both (plus, the text should be a variable).
The goal is to replicate the following Navigation model:
(source: s-msft.com)
Is it possible to adapt this simple XAML to achieve both text and image? If not, how to do it?
<Page
x:Class="Lenny.Windows.Views.MainPage"
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:vm="using:Lenny.Windows.Views"
mc:Ignorable="d">
<Page.BottomAppBar>
<CommandBar>
<CommandBar.Content>
<Grid/>
</CommandBar.Content>
<AppBarButton Icon="Accept" Label="appbarbutton"/>
<AppBarButton Icon="Cancel" Label="appbarbutton"/>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}"></Image>
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png" >
<Grid />
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
</Pivot>
</Grid>
</Page>
If you are using MVVM you can use a property from your ViewModel and add a textblock in the header template to make a binding with this property and you can change this value from your ViewModel.
I said this because you need the text needs to be variable.
If you are not using MVVM pattern you need to use the Binding Approach
https://msdn.microsoft.com/en-us/library/windows/apps/mt269383.aspx
in xaml you need to add a stackpanel with orientation = horizontal and add your text and your image inside all of them in your header template
I have written the user control below and I want to display a clock image on the button control. The image has BuildAction set to Resource. It shows up perfect in the XAML design screen, but when I run the application the button is blank. What am I doing wrong?
<UserControl x:Class="App_Process_Admin.User_Controls.TimePicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="150">
<UserControl.Resources>
<ResourceDictionary>
<Image x:Key="ClockImage" Source="Icons/Clock.png"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="180" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Name="TimeField" Text="" />
<Button Grid.Row="0" Grid.Column="1" Content="{StaticResource ClockImage}" Click="SetTime_Click" />
<local:ClockPopUp x:Name="ClockPopUp1" Grid.Row="1" Grid.Column="0" Visibility="Hidden"></local:ClockPopUp>
</Grid>
</UserControl>
I had the same problem, i resolve it this way (in visual studio 2019, wpf application) :
put your images in your project in a folder
Create an image in xaml and put your source
At this point for me the images are displayed in the design window but not at the runetime
Access to your image in your project with the solution explorer
Select each image and open the property window
Set "Generation action" to "Resource" and "Copy in the repository" To "always copy"
I have done that and i can see my images at runtime :)
PS : sorry for my english, i'm french
Image is a control. If you add it to resources his way, it'll only be displayed in the last place it's added to and will disappear from all previous places. You can fix this by adding x:Shared=False:
<Image x:Key="ClockImage" x:Shared="False" Source="Icons/Clock.png"/>
This way, a new Image control will be created every time it's requested.
Alternatively, you can create a button style with Image in its ContentTemplate and add BitmapImage to the resources directly:
<BitmapImage x:Key="Bitmap" UriSource="Icons/Clock.png"/>
<Style x:Key="ButtonImage" TargetType="Button">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{TemplateBinding Content}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Now you can create buttons with images this way:
<Button Content="{StaticResource Bitmap}" Style="{StaticResource ButtonImage}"/>
Image controls will be created by the framework based on the template.
In my case, it was needed to first add the images into project, by drag-and-drop'ing them into the folder where your .xaml is in solution explorer.
Then, i added to .xaml:
<Window.Resources>
<BitmapImage x:Key="Icon" UriSource="Images/Image.png"/>
</Window.Resources>
<Button x:Name="SomeButton" Background="Gray">
<Image Source="{StaticResource Icon}"/>
</Button>
And that's it.
Also, if you have complicated project with many folders, you can use ../ in UriSource to go up a folder from the current, where .xaml file is located
I would like to show a ContentDialog on first launch of my app, to show the EULA to the end user.
It seems that if an AppBar is defined in the calling page the two buttons in the dialog are not visible, an empty area with the same size of the command bar area defined in the calling page, is shown instead.
This is the markup on the ContentDialog:
<ContentDialog
x:Class="MyApp.EulaPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TERMS OF USE"
PrimaryButtonText="i agree"
SecondaryButtonText="cancel"
PrimaryButtonClick="OnAgreeButtonClick"
SecondaryButtonClick="OnCancelButtonClick">
<Grid x:Name="ContentPanel" Margin="0,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="524" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Margin="0,0,0,2" >
<RichTextBlock IsTextSelectionEnabled="False" TextAlignment="Left" TextIndent="0" FontSize="14" FontFamily="Segoe WP" >
</RichTextBlock>
</ScrollViewer>
</Grid>
The GridRowDefinition has a fixed hight, because the text in the RichTextBlock needs to be scrolled.
I have prepared a sample project that can be found here. The zip file contains also a screenshot showing how I see the dialog.
I had the same problem and I have solved it by modifying/removing Height/Width and Margins of the Contentdialog
I'm creating a Windows Store app where each page has a dominant color used for titles, buttons and such.
In App.xaml I've created a default Brush that's overriden in each Page's xaml file, and a style template for Buttons which I reuse in every page. The templates are supposed to use the page's color but for some reason they stick with the default value.
Here are my xaml files.
App.xaml
<Application
x:Class="Foo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Foo"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<SolidColorBrush x:Name="SectionDefaultBrush" Color="Red" />
<Style TargetType="Button" x:Name="NavigationButtonStyle">
<Setter Property="FontFamily" Value="Myriad Pro" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="Border" Fill="#f4f4f4" Margin="0" />
<TextBlock Foreground="{ ThemeResource SectionDefaultBrush }" Text=">" FontSize="31" />
<ContentPresenter x:Name="Content" VerticalAlignment="Center" Foreground="#5A5A5A" HorizontalAlignment="Left" FontSize="31"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
SomePage.xaml
<Page
x:Class="Foo.Pages.SomePage"
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"
mc:Ignorable="d">
<Page.Resources>
<SolidColorBrush x:Key="SectionDefaultBrush" Color="Green" />
</Page.Resources>
<ViewBox>
<Canvas>
<TextBlock Text="Some text" Foreground="{ ThemeResource SectionDefaultBrush }" Canvas.Left="130" TextWrapping="Wrap" Canvas.Top="252" Height="177" Width="507" FontFamily="Myriad Pro" FontSize="54" />
<Button Content="Click me" Style="{ ThemeResource NavigationButtonStyle }" Canvas.Left="130" Canvas.Top="900" Width="507" Height="48" />
</Canvas>
<ViewBox>
In this example, the TextBlock's text color is green as expected (and red if I remove the Brush from Page.Resources), but the Button's content remains red. Is there a way to tell the template to use the final color ?
The app's resource dictionary doesn't know about other dictionaries and unlike with WPF's DynamicResources - StaticResource isn't reevaluated and ThemeResource is, but I think only when the actual theme changes. The way you can customize the color of that button is to use TemplateBinding in the template and bind to say the Foreground property of the button and also set that in the Foreground Setter of your button style to {StaticResource SectionDefaultBrush}. Then in your page you can override that by setting the Foreground of the button to a different value or using a derived button style that changes the Foreground value.
Ideally too - you should define theme resources in your dictionary so the brushes change depending on OS theme (especially high contrast). You might want to name your brush then as "SectionDefaultThemeBrush" instead of just "SectionDefaultBrush".