How to change the flow direction of the background Image? - c#

I have a panorama app, and is localized. it is applied the flow direction for the app:
FlowDirection flow = (FlowDirection)Enum.Parse(typeof(FlowDirection), AppResources.ResourceFlowDirection);
RootFrame.FlowDirection = flow;
this way it applies the direction for the app, but the problem is that I don't want the direction of the background Image also change:
<phone:Panorama.Background>
<ImageBrush ImageSource="/MyApp;component/Assets/CustomBackground.png"/>
</phone:Panorama.Background>
So I thought I can change the FlowDirection of this background image, or use its name to change it programmatically or add something like StackPanel and change its direction, but at the end neither one worked.
How to not allow the direction of the background image to change, or how to assign prefered direction to it? (this is a windows phone 8 app)

Set the FlowDirection of the Panorama itself to be LeftToRight, but change the FlowDirection of the PanoramaItem controls to match the parent control of your Panorama
Example:
<Grid x:Name="LayoutRoot" Background="Transparent" FlowDirection="RightToLeft">
<!--Panorama control-->
<phone:Panorama Title="my application" FlowDirection="LeftToRight">
<phone:Panorama.Background>
<ImageBrush ImageSource="/PanoramaApp1;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem Header="first item" FlowDirection="{Binding FlowDirection, ElementName=LayoutRoot}">
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem FlowDirection="{Binding FlowDirection, ElementName=LayoutRoot}">
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
Also the app will flow to whatever the Culture of the phone is. There is not a need to store the FlowDirection. Taking this knowledge, you would remove the FlowDirection property from the Grid (LayoutRoot) but leave it on the Panorama/PanoramaItems so they are set correctly

Related

How to set button in side stackpanel to right edge in windows 10 universal app development

I an new to windows app development,i searched for this but not found any where.I need the button at right edge and Stretch the textbox till buttons start.But I am unable to set the button to Right edge.
How to acheve this.
A stackpanel works like a container. If you define layout properties on your stackpanel, then the objects inside your stackpanel cannot be displayed outside of the stackpanel's limits.
For example :
If I set my row and column number in my stackpanel,
<StackPanel Grid.Row="0" Grid.Column="2" Name="Version" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top">
<Label Grid.Column="4" Grid.Row="6" Name="Ver" Content="V." HorizontalAlignment="Right" />
<TextBlock Name="Vers" Text="1.0" TextAlignment="Right" />
</StackPanel>
Then the row/column properties set on my label are ignored and the 'HorizontalAlignment="Right"' will place my label on the right side of the stackpanel, not the grid.
A solution may be to remove your button from your stackpanel, you are then free to place your button anywhere on the grid.
Another solution can be to expand your stackpanel's limits.
To do so, you can use the Grid.ColumnSpan property or simply set your stackpanel on the right of the grid.
Hope that helped.

How do I add a background image to LayoutDocumentPane?

I have created a Resource for the ImageBrush, see below, but I do not know how I would add it to the AvalonDock LayoutDocumentPane. I want to add it to the pane because I want to have a logo in the background, but LayoutDocumentPane covers the Window background.
<BitmapImage x:Key="LogoBitmap" UriSource="pack://application:,,,/myLibrary;component/myImages/myBigLogo.PNG"/>
<ImageBrush x:Key="LogoImage" ImageSource="{StaticResource LogoBitmap}"/>
Right now, I have the following:
<ad:DockingManager x:Name="dockManager" >
<ad:LayoutRoot>
<ad:LayoutPanel x:Name="myLayoutPanel" Orientation="Horizontal">
<ad:LayoutAnchorablePane x:Name="myLayoutAnchorablePane" DockWidth="400"/>
<ad:LayoutDocumentPane x:Name="myDocumentPane"/>
</ad:LayoutPanel>
</ad:LayoutRoot>
</ad:DockingManager>
I was able to find a method of setting a background image that works for my use case, but I am using a very simple AvalonDock configuration so I'm not sure if it will work for you.
This will set the image for the entire dock control, I was not able to find any way to set a background at any level lower than this.
<xcad:DockingManager x:Name="dockingManager">
<xcad:DockingManager.Background>
<ImageBrush ImageSource="/Resources/Images/MDIBACKGROUNDIMAGE.png"/>
</xcad:DockingManager.Background>
<xcad:LayoutRoot>
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutDocumentPaneGroup>
<xcad:LayoutDocumentPane >
<xcad:LayoutDocument>
<views:MyForm></views:MyForm>
</xcad:LayoutDocument>
</xcad:LayoutDocumentPane>
</xcad:LayoutDocumentPaneGroup>
</xcad:LayoutPanel>
</xcad:LayoutRoot>
</xcad:DockingManager>

Changing the background color of a metro style app has no effect

I am trying to change the background color of my application in visual studio (XAML) to White (or, ApplicationPageBackgroundTheme / or whatever it's called) and it doesn't work. When I debug, it just shows a black background.
When I go to the Devices pane and select the default color theme to "Light", it makes everything on the screen white, even the text and the background.
When I change the background of the colors in xaml, at runtime it gets changed back to black!
I've searched, but haven't found any information. Is this a known bug? This has never happened before. I am using Visual Studio 2012 Ultimate.
<Page
x:Class="hjgjhgjg.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:hjgjhgjh"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Background="White">
<Grid Style="{StaticResource LayoutRootStyle}" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="False" Style="{StaticResource BackButtonStyle}" />
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="gfdgfdg" Style="{StaticResource PageHeaderTextStyle}" />
</Grid>
</Grid>
</Page>
Hard to know exactly what's going on without more of the app/styles, but an easy way to change theme is to use the Application object's RequestedTheme property.
For example, in App.xaml, set RequestedTheme="Light" as a property of the Application element:
<Application
x:Class="App1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
RequestedTheme="Light">
This can be helpful because the Light theme will then affect all pages and automatically changes text/buttons/etc. to black instead of everything being white if you only make the background color white.
This walkthrough covers this and how to override default styles with your own custom ones:
Part 1: Create a "Hello, world" app (Windows Store apps using C#/VB and XAML)
BTW, the Device pane doesn't change app settings, but simulates in design view how the app would appear with various device features/settings (screen, theme, etc.) So while it may look like one theme in the designer, it's going to revert to whatever the system/XAML/code results in when you actually run it.
If I remember correctly, you can check in the manifest in the first tab. There should be an option for ya there.
The background color of the page won't be visible, because the root Grid is opaque and have it's color set to black by default, what you can do is set the color of the Grid to a transparent one, or apply the white color to the Grid, as i see you've already applied the color to the Grid, i recommned you to quit the Style properties of the Grid and see if that helps.
I found a different way.
If you click on the grid item in the XAML code, to select it. Then look in the properties window, expand the Brush property and you will see the "Background" item. Click on the small black square to the right of the background property, this will bring up a pop up menu. Click the "Convert to Local value". This will then give you the ability to change the background with the available items underneath. I got mine to be a gradient fill from green to yellow! Ghastly! :-)

Border for WebBrowser control

First i have created a web browser control(full screen sized) and then i have created a border above the web browser control but when i debugged it, the border is not visible. Need help? Thanks in advance for your hard work!
<Border x:Name="UrlBorder" Background="{StaticResource PhoneAccentBrush}" CornerRadius="8">
<TextBox x:Name="UrlTextBox" Background="White" InputScope="URL" Margin="0,0,98,0"/>
</Border>
<phone:WebBrowser x:Name="BrowserHost" Margin="0,12,0,0" Grid.RowSpan="2" GotFocus="BrowserHost_GotFocus" IsScriptEnabled="True" />
Not sure what you are trying to do here. Looks like you want an url input textbox surrounded by border on top of a nearly-fullscreen web browser element. If so, I would use a stackpanel.
<StackPanel>
<Border><TextBox /></Border>
<WebBrowser/>
</StackPanel>
If you want to hide the url input, you can still set the Border's visibility to Collapsed.
Elements in grid can overlap each other. So, the webbrowser element will cover your bordered textbox if it's fullscreen. Also, neither your border, nor your textbox has explicit height nor width.

Bing Maps (Silverlight) maps - specifying canvas to be at foreground through XAML

Below is the XAML code i have for a Bing Maps Silverlight weather related implementation.
Here is what i am trying to do:
Have a bing maps with several (over 100) pushpins- on mouseover - show a contentpopup (canvas=myPopup) below. Simple enough.
Everything works fine - however, when mypopup displays on mouseover, it is not on the foreground (the other pins appear on top of the contentpopup) - hence making it not very readable.
Question:
How do i specifiy the myPopup canvas specified in XAML below to always appear in the foreground, i.e. top most of the Bing Maps silverlight control when a user views it on mouseover.
Thanks!
<Grid x:Name="LayoutRoot" Background="White">
<m:Map x:Name="GlobalMap" Mode="Road" Center="15,7" ZoomLevel="2" CredentialsProvider="{StaticResource MyCredentials}" Margin="-70,-40,-100,-72">
<m:MapLayer x:Name="myLayer">
<Canvas x:Name="myPopup" Visibility="Collapsed" Opacity="1">
<Rectangle x:Name="myPopupRectangle" Fill="White" Canvas.Left="0" Canvas.Top="0" Height="100"
Width="100" RadiusX="15" RadiusY="15"/>
<StackPanel Canvas.Left="8" Canvas.Top="8">
<TextBlock x:Name="myPopupTexts" FontSize="5" Width="100">
</TextBlock>
</StackPanel>
</Canvas>
</m:MapLayer>
</m:Map>
</Grid>
Try adding Canvas.ZIndex to the MapLayer element, give it a large value like 200 or add your push pins to another MapLayer (rather than adding the pins directly to the map) that appears ahead of this popup layer in document order.
I did something similar to this, but took a different approach. What I did was create a custom pushpin template and create a PopUp within the template.
When the user hovers over the pushpin, the popup is displayed. Using the PopUp will solve your problem, since the control will automatically position it on top of everything. Try wrapping the Canvas in a PopPup and see if that works.
hth

Categories

Resources