Dark theme of app - windows

I writing application for Windows phone.
I want to set dark theme of app.
I set it on this window, but when I deploy this app on device, my theme is light.
Theme
Code of my xaml:
<Page
x:Class="Murakami.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Murakami"
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}">
<Button x:Name="button" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="48" Height="46">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/menu.png"/>
</Button.Background>
</Button>
<Button x:Name="button1" Content="" HorizontalAlignment="Left" Margin="302,10,0,0" VerticalAlignment="Top" Width="48" Height="46" >
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/cart.png"/>
</Button.Background>
</Button>
<Button x:Name="button2" Content="" HorizontalAlignment="Left" Margin="126,5,0,0" VerticalAlignment="Top" Height="63" Width="115">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/logo_murakami.png"/>
</Button.Background>
</Button>
</Grid>
How I can fix this?

Related

Windows Mobile Button not filling the edges

I'm new to Window Mobile App Development and now I've to create the button, I have created it successfully, but the problem is it doesn't fill the edges of the button with the image i set to it.
I have set the border width and padding everything to 0 but still the issue exists and I have even checked in on the windows simulator
This is how it looks. The button should fill the image? How it can be achieved?
Here is the code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image HorizontalAlignment="Left" Height="218" Margin="96,27,0,0" VerticalAlignment="Top" Width="270" RenderTransformOrigin="0.504,0.514" Source="/Assets/Images/qima_logo.png"/>
<TextBox HorizontalAlignment="Left" Height="72" Margin="46,301,0,0" TextWrapping="Wrap" Text="Username" VerticalAlignment="Top" Width="366" BorderBrush="DarkGray" BorderThickness="3" TextChanged="TextBox_TextChanged" InputScope="EmailUserName" AcceptsReturn="True" />
<TextBox HorizontalAlignment="Left" Height="72" Margin="46,373,0,0" TextWrapping="Wrap" Text="Password" VerticalAlignment="Top" Width="366" BorderBrush="DarkGray" InputScope="Password"/>
<Button Content="Login" HorizontalAlignment="Left" Margin="46,450,0,0" VerticalAlignment="Top" Width="366" Height="88">
<Button.Background>
<ImageBrush ImageSource="/Assets/Images/btn_bg.png"/>
</Button.Background>
</Button>
<Button Content="Organization List" Margin="0,649,0,0" Width="455" BorderThickness="0" Padding="0" UseLayoutRounding="True" HorizontalAlignment="Right" Click="Button_Click">
<Button.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Images/organizations_list_btn.png" AlignmentX="Left"/>
</Button.Background>
</Button>
<Button Content="Membership List" HorizontalAlignment="Left" Margin="0,580,0,0" VerticalAlignment="Top" Width="456" Foreground="White">
<Button.BorderBrush>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Images/members_list_btn.png"/>
</Button.BorderBrush>
<Button.Background>
<ImageBrush ImageSource="/Assets/Images/members_list_btn.png" Stretch="UniformToFill"/>
</Button.Background>
</Button>
<Image HorizontalAlignment="Left" Height="42" Margin="46,533,0,0" VerticalAlignment="Top" Width="400" Source="/Assets/Images/members_list_btn.png" Stretch="Fill">
<Image.OpacityMask>
<ImageBrush ImageSource="/Assets/Images/members_list_btn.png"/>
</Image.OpacityMask>
</Image>
</Grid>

Visual Studio XAML Designer not showing correctly window's background image

Why when I'm designing an application in Microsoft Visual Studio 2010 I get:
But when I run project I get:
How to remove this frame with "LogIn" and fix this to show real design?
edit
XAML code:
<Window x:Class="MemsoriaClientApplication.LogIn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="LogIn" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" FontFamily="Verdana" FontSize="18" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="189" Width="362">
<Window.Background>
<ImageBrush ImageSource="loginInterface/bg.png"></ImageBrush>
</Window.Background>
<Grid>
<Label Name="lbl_Title" Content="Aplikacja Memsoria.pl - Logowanie" Opacity="0" FontFamily="Tahoma" FontSize="14" Foreground="#dcdcdc" Margin="6, 5">
<Label.RenderTransform>
<ScaleTransform ScaleX="0" ScaleY="0"/>
</Label.RenderTransform>
<Label.Triggers>
<EventTrigger RoutedEvent="Label.Loaded">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource ResourceKey=TitleAnimation}"/>
</EventTrigger.Actions>
</EventTrigger>
</Label.Triggers>
</Label>
<Line X1="10" X2="0" Y1="30" Y2="30" Stroke="#e5e5e5" Opacity="0">
<Line.Triggers>
<EventTrigger RoutedEvent="Line.Loaded">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource ResourceKey=DrawLine}"/>
</EventTrigger.Actions>
</EventTrigger>
</Line.Triggers>
</Line>
<Label Content="NAZWA KONTA:" Foreground="White" FontFamily="Tahoma" FontSize="14" Margin="7,62,-7,-62" />
<Label Content="HASŁO:" Foreground="White" FontFamily="Tahoma" FontSize="14" Margin="7,97,-7,-62" />
<TextBox Name="txt_login" Style="{StaticResource ResourceKey=Textbox}" Margin="108,31,-9,66" />
<PasswordBox Margin="110,77,-7,46" Name="txt_Password" Style="{StaticResource Textbox}" />
<Button Content="X" Style="{StaticResource ResourceKey=CloseButton}" Height="24" Name="btn_Close" Width="24" Margin="325, -155, 0, 0" Click="btn_Close_Click" />
<Button Name="btn_LogIn" Content="Zaloguj" Style="{StaticResource ResourceKey=LoginButton}" Margin="0,119,-3,-13" Click="btn_LogIn_Click" />
</Grid>
WindowStyle="None"
AllowsTransparency="True"
Will make window appear with no border if that is what you want,
If you use like this then your problem will be solve.
WindowStyle="SingleBorderWindow"

Silverlight Value does not fall within expected range when trying to open a xaml

I receive the following message in a simple message pop up, when trying to open the designer of some of my xaml files:
"Value does not fall within expected range"
I've tried to create a new windows and open the xaml files in notepad and copy them in the new one, but even with a new control it gives me this error without even having modifying it.
Here's one of the xamls that gives me an error:
<controls:ChildWindow x:Class="Playground.Views.MessageWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="343" Height="159"
Title="MessageWindow" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="316*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="216*" />
<RowDefinition Height="32" />
</Grid.RowDefinitions>
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,9,0,0" Grid.Row="1" Grid.ColumnSpan="2" />
<dxe:TextEdit HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Top" HorizontalContentAlignment="Left" Name="txtMessage" IsReadOnly="True" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" Background="#FFE7E9EC" />
</Grid>
And here's one that doesn't have this problem:
<controls:ChildWindow x:Class="Playground.Views.LogIn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="270" Height="200"
Title="Log In" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="Log In" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
<sdk:Label Height="23" HorizontalAlignment="Left" Margin="18,23,0,0" Name="label1" VerticalAlignment="Top" Width="60" Content="Username" />
<sdk:Label Height="23" HorizontalAlignment="Left" Margin="18,56,0,0" Name="label2" VerticalAlignment="Top" Width="60" Content="Password" />
<dxe:CheckEdit HorizontalAlignment="Left" Margin="18,85,0,0" Name="checkEdit1" VerticalAlignment="Top" Width="92" Content="Use CIL/CIP" IsThreeState="False" Checked="checkEdit1_Checked" Unchecked="checkEdit1_Unchecked"/>
<dxe:CheckEdit Margin="116,85,0,0" Name="remUNCE" VerticalAlignment="Top" Content="Save Username" IsThreeState="False" HorizontalAlignment="Left" Width="120" Checked="remUNCE_Checked" Unchecked="remUNCE_Unchecked"/>
<dxe:TextEdit HorizontalAlignment="Left" Margin="86,23,0,0" Name="textEdit1" VerticalAlignment="Top" Width="136" Text="administrator" />
<dxe:PasswordBoxEdit HorizontalAlignment="Left" Margin="86,56,0,0" Name="passwordBoxEdit1" VerticalAlignment="Top" Width="136" />
</Grid>
I tried searching for this problem on the internet but all i got were results for duplicate names in the same xaml, which is not the case here, also i'm not injecting any controls in codebehind so there shouldn't be any problem regarding duplicate names.
i use visual studio 2010 and also in case it has any relevance i have devexpress installed, but when i started getting this error i had an earlier version so i upgraded it to the latest in hopes of fixing it, but no luck.

Windows Phone pushpin overlapping

I'm coding a simple windows phone 7.5 localization application.
I've changed the default pushpin template as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="allPushpinsTemplate">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
When I click on a pushpin, I handle the event and change the template of the selected pin as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="detailedPushpinTemplate">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<TextBlock Text="{Binding Adress}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ZipCode}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding City}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding TelStd}" Foreground="White" />
<TextBlock Text="{Binding Email}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="email" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-mail.png" Width="40" Height="40" />
</Button.Content>
</Button>
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="phone" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-phone.png" Width="40" Height="40" />
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
So that I can display some info and some commands. The result works perfectly and display a black rectangle with all my custom data.
But, the other pins (default template) overlap the rectangle and appears on the top of my selected pin and hide information.
Has anyone an idea to force the selected pin template to be always on top of the other pins ?
for information the XAML of my map :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas >
<maps:Map ZoomBarVisibility="Visible" ZoomLevel="4" Center="46.8821,2.2697" Name="map1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Top="0" Height="600" Width="460">
<maps:MapItemsControl x:Name="mapControl"/>
<maps:MapItemsControl ItemsSource="{Binding Locations}" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}" Template="{StaticResource allPushpinsTemplate}" MouseLeftButtonDown="Pushpin_MouseLeftButtonDown"/>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
<maps:MapLayer Name="imageLayer"/>
</maps:Map>
<Button Content="some action" Height="70" HorizontalAlignment="Left" Margin="0" Name="button1" VerticalAlignment="Top" Width="170" Canvas.Left="140" />
</Canvas>
</Grid>
The only way I've been able to work around this default behaviour is to remove the original pin and then add a new one in the same position with the different template.
The newly added pin appears at the top in the Z-Order but I haven't been able to alter the Z-Order of existing pins once created.
Also remember to "reset" any pins in the selected state when the user clicks on another.
I guess this should help you: http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/c4055dba-3efd-4bf7-98b3-cd8e24d175ea

Why can't I scroll all the way to the bottom when onscreen keyboard is active

I have a bunch of controls in a collection of stackpanels that is contained in a grid. The grid is pretty long and runs off the page so I have put it in to a scrollviewer. Everything works perfectly and I can scroll up and down my page until the keyboard is active. Once that happens, I am not able to scroll the content all the way to the bottom when a textbox is highlighted. I can scroll to a certain extent but not all the way down. Am I doing something wrong? My code is as follows:
<ScrollViewer Margin="12,0,12,0" Grid.Row="1">
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Height="837" Width="456">
<StackPanel HorizontalAlignment="Left" Width="450" Margin="0,63,0,405">
<TextBlock Height="30" Name="tBlk_Username" Text="Display Name" />
<TextBox Height="71" Name="tb_UserNameVal" Text="{Binding UserNameValue, Mode=TwoWay}" Width="452" />
<TextBlock Height="30" Name="tBlk_Email" Text="Email" />
<TextBox Height="71" Name="tb_EmailVal" Text="{Binding EmailValue, Mode=TwoWay}" Width="452" />
<TextBlock Height="30" Name="tBlk_Message" Text="Message" />
<TextBox Height="130" Name="tb_MessageVal" Text="{Binding MessageValue, Mode=TwoWay}" Width="452" />
</StackPanel>
<StackPanel Height="37" HorizontalAlignment="Left" Margin="0,519,0,0" Name="stackPanel2"
VerticalAlignment="Top" Width="450">
<TextBlock Height="30" Name="tBlk_PicInfo" Text="Include a Photo" />
</StackPanel>
<StackPanel Orientation="Horizontal" Height="90" HorizontalAlignment="Left" Margin="12,432,0,0"
Name="stackPanel1" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
<TextBox Height="71" Name="tb_Location" Text="{Binding Location}" Width="367" IsReadOnly="True" />
<Button Height="60" Name="btn_Clear" Width="60" BorderThickness="0" Background="{Binding LocationImage}" Style="{StaticResource LocationButtonStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="ClearCommand" Command="{Binding ClearCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="205" HorizontalAlignment="Left" Margin="12,556,0,0"
Name="stackPanel3" VerticalAlignment="Top" Width="452" d:LayoutOverrides="GridBox">
<Image Name="img_FlickrPic" Stretch="Fill" Width="260" Source="{Binding Capture}" Margin="0,13,0,0" />
<Button Name="btn_Capture" Width="90" Height="90" Margin="0,67,0,55" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="/Images/camera.png" />
</Button.Background>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="CaptureClick" Command="{Binding CaptureCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="100" HorizontalAlignment="Left"
Margin="4,763,0,0" Name="stackPanel4" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
<Button Content="Submit" Height="71" Name="btn_Submit" Width="130" IsEnabled="{Binding SubmitEnabled}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="SubmitCommand" Command="{Binding SubmitCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Height="59" HorizontalAlignment="Left" Name="stackPanel5" VerticalAlignment="Top" Width="456" Orientation="Horizontal">
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConf" Text="Please share my " Width="150" TextAlignment="Center" Height="33" />
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Foreground="#FF00BCE4" Name="tBlk_StepConfCount" Text="{Binding StepVal}" Width="56" FontSize="34" TextAlignment="Center" VerticalAlignment="Top" />
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConfTrail" Text=" steps for water" Width="134" TextAlignment="Center" Height="40" />
</StackPanel>
</Grid>
</ScrollViewer>
The problem is that the ScrollViewer doesn't pay attention to the Soft Input Panel (or keyboard), so it only scrolls as long as it can behind the keyboard so to speak.
A simple solution is to add a margin to the bottom of the content control of the ScrollViewer.
The longer and more complicated solution is to add the margin when the SIP is displayed. Unfortunately there's no event for it, but I guess one could listen to when a textbox gains or loses focus, and set a margin or perhaps show a control at the bottom of the page when a textbox has focus (and hence the SIP is displayed) and hide it when it doesn't.

Resources