I used a TOOLKIT ListPicker . But the items are not being shown in FullScreen Mode. Its a Blank Page on clicking ListPicker but the items are present transparent and can even be selected. it seems blank page but items are there.
<phone:PhoneApplicationPage
x:Class="Sunder_Gutka.SettingPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Name="PickerItemTemplate">
<TextBlock Text="{Binding BackGroundColorArray}" />
</DataTemplate>
<DataTemplate x:Name="PickerFullModeItemTemplate" >
<TextBlock Name="BackgroundColor"
Text="{Binding BackGroundColorArray}"
/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ListPicker x:Name="BackgroundColor" FullModeHeader="Select Background Color:" Header="Background Color:" BorderThickness="0" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" ItemTemplate="{StaticResource PickerItemTemplate}" Background="#FF09043C" SelectionChanged="BackgroundColor_SelectionChanged" >
</toolkit:ListPicker>
</Grid>
</Grid>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
namespace Sunder_Gutka
{
public partial class SettingPage : PhoneApplicationPage
{
String[] BackGroundColorArray = { "Black", "Light Grey", "White[Default]", "Blue", "Green", "Saffron", "Yellow", "Magenta", "Dark Grey", "Red" }; //To be used in LISTPICKER
public SettingPage()
{
InitializeComponent();
this.BackgroundColor.ItemsSource = BackGroundColorArray; //Item Source of listpicker
}
string SelectedBackgroundColor;
private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
SelectedBackgroundColor = BackgroundColor.SelectedItem.ToString();
}
}
Update your DataTemplate:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Name="PickerItemTemplate">
<TextBlock Text="{Binding}" />
</DataTemplate>
<DataTemplate x:Name="PickerFullModeItemTemplate" >
<TextBlock Name="BackgroundColor" Text="{Binding}"/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Its working now. I have Implemented this.
By default when you display items in the FullScreen mode your items are displayed with smaller font size. So what you have to do is to change the DataTampleate of the FullScreen mode ItemTempate to following.. I have only increased the FontSize here.. You can do any styling you like.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Name="PickerItemTemplate">
<TextBlock Text="{Binding}" />
</DataTemplate>
<DataTemplate x:Name="PickerFullModeItemTemplate" >
<TextBlock Name="BackgroundColor" Text="{Binding}" FontSize="{StaticResource PhoneFontSizeLarge}" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Its up to you to style the Template appropriately. Also im hoping that you are aware that ListPicker would only go to FullScreen mode only if you have more that 5 items in the ListPicker. If not you need to manually set ExpansionMode="FullScreenOnly" to get it full screen.
Related
Here's a picture of the overlay from the sample app:
Here's the git page of the Material Design In XAML Toolkit (you can download the demo project here): Toolkit:https://github.com/ButchersBoy/MaterialDesignInXamlToolkit
This is probably property somewhere in the Material Design In XAML Toolkit library and i am asking if anyone knows how to set it (or if the overlay can even be turned off).
<Window x:Class="MaterialDesignColors.WpfExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfExample="clr-namespace:MaterialDesignColors.WpfExample"
xmlns:domain="clr-namespace:MaterialDesignColors.WpfExample.Domain"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
xmlns:materialDesignDemo="clr-namespace:MaterialDesignDemo"
Title="Material Design in XAML" Height="800" Width="1100"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{StaticResource MaterialDesignFont}" Icon="favicon.ico">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- data template used for the dialogs example, defines a View for a ViewModel of type DateTime -->
<DataTemplate DataType="{x:Type system:DateTime}">
<StackPanel Margin="16">
<TextBlock>England win the World Cup:</TextBlock>
<TextBlock Margin="0 8 0 0" Text="{Binding }" />
<TextBlock Margin="0 8 0 0" >You will never see that again.</TextBlock>
<Button Margin="0 8 0 0" IsDefault="True" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" Style="{DynamicResource MaterialDesignFlatButton}">AWESOME</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<materialDesign:DialogHost Identifier="RootDialog">
<materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
<materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel MinWidth="212">
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}"
DockPanel.Dock="Top"
HorizontalAlignment="Right" Margin="16"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />
<ListBox x:Name="DemoItemsListBox" Margin="0 16 0 16" SelectedIndex="0"
PreviewMouseLeftButtonUp="UIElement_OnPreviewMouseLeftButtonUp">
<ListBox.ItemTemplate>
<DataTemplate DataType="domain:DemoItem">
<TextBlock Text="{Binding Name}" Margin="32 0 32 0" />
</DataTemplate>
</ListBox.ItemTemplate>
<domain:DemoItem Name="Home">
...
<domain:DemoItem Name="Shadows">
<domain:DemoItem.Content>
<wpfExample:Shadows />
</domain:DemoItem.Content>
</domain:DemoItem>
</ListBox>
</DockPanel>
</materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel>
<materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
Mode="PrimaryMid" DockPanel.Dock="Top">
<DockPanel>
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<materialDesign:PopupBox DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<StackPanel>
<Button Content="Hello World" Click="MenuPopupButton_OnClick"/>
<Button Content="Nice Popup" Click="MenuPopupButton_OnClick"/>
<Button Content="Goodbye" Click="MenuPopupButton_OnClick"/>
</StackPanel>
</materialDesign:PopupBox>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22">Material Design In XAML Toolkit</TextBlock>
</DockPanel>
</materialDesign:ColorZone>
<ContentControl Margin="16" Content="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.Content}" />
</DockPanel>
</materialDesign:DrawerHost>
</materialDesign:DialogHost>
</Window>
The black shade is due to a grid defined in Generic.xaml:
<Grid x:Name="PART_ContentCover" Background="{x:Null}" Opacity="0"
IsHitTestVisible="False" Focusable="False" />
Which is animated to set the opacity to 0.56 when the drawer is drawn. Unfortunatelly this grid does not belong to any template so you cannot change it in client xaml.
The other option is to change the shade's black brush which is also defined in Generic.xaml:
<SolidColorBrush x:Key="BlackBackground" Color="Black" />
But this is also something I wouldn't know how to change from a client xaml, so the only advice until someone with more WPF skillz gives a better option is to simply recompile the source and change the black brush to:
<SolidColorBrush x:Key="BlackBackground" Color="#00000000" />
Alternatively you can use the flyout control which is shown in the other demo that does not have the dark shade feature but other than that is the same.
Update: I've found one way to solve this. You can subclass DrawerHost like this:
public class DrawerHostEx : DrawerHost
{
public DrawerHostEx()
{
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var grid = GetTemplateChild(TemplateContentCoverPartName) as System.Windows.Controls.Grid;
grid.Visibility = System.Windows.Visibility.Collapsed;
}
}
Then you simply replace DrawerHost with DrawerHostEx in the XAML.
I am writing a Windows Phone 8.1 App (WinRT).
my user control:
XAML:
<UserControl x:Name="LoadingProgressBarPage"
x:Class="Project1.Custom.General.UserControls.LoadingOverlayFullScreen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Merakyahoga.com.Custom.General.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
Foreground="{x:Null}"
d:DesignHeight="800" d:DesignWidth="480" >
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<StackPanel
Name="LayoutRoot_StackPanelMain"
Grid.Row="1"
Orientation="Vertical">
<ProgressBar Name="ProgressBar"
IsIndeterminate="True"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
Height="50"
Width="480"
VerticalAlignment="Center"/>
<StackPanel Name="LayoutRoot_SubStackPanel"
Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Image Name="ImageHolder_Main"
Width="54">
</Image>
<TextBlock Name="ProgressBarText"
Text="Please Wait.."
Margin="10,0,0,0"
FontWeight="Normal"
HorizontalAlignment="Center"
FontSize="18"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}" VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>
cs:
namespace Project1.Custom.General.UserControls
{
public partial class LoadingOverlayFullScreen : UserControl
{
public LoadingOverlayFullScreen()
{
InitializeComponent()
//WINRT:
this.LayoutRoot.Height = Window.Current.Bounds.Height;
this.LayoutRoot.Width = Window.Current.Bounds.Width;
}
}
}
In my mainpage.cs:
LoadingOverlayFullScreen LoadingOverlayFullScreenObject = new LoadingOverlayFullScreen();
//test:
LoadingOverlayFullScreenObject.ProgressBarText = "Hello"; //ERROR Here >> **element inaccessible due to its protection level**
By naming the TextBlock element, you cause the XAML compiler to generate a class member having that name, i.e. ProgressBarText. But the accessibility for that member is not public, but rather internal.
If you really want for the field to be public, you can add the x:FieldModifier attribute:
<TextBlock Name="ProgressBarText"
x:FieldModifier="public"
Text="Please Wait.."
Margin="10,0,0,0"
FontWeight="Normal"
HorizontalAlignment="Center"
FontSize="18"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
VerticalAlignment="Center"/>
That said, it would be better to expose the Text property of the TextBlock object as a string property in your code-behind. Or even better, use data-binding to control the Text value of the TextBlock (but your code example is not complete enough for me to say how exactly you would do that).
I am creating a Windows Phone Application but i have a small problem.
I am using the AppSettings Class from MSDN samples to save my settings and this is working fine.
BUT, inside my settings UI i have a Radio Inputs. When each Radio Input is being checked i want to make Visibility.Collaped or Visibility.Visible a TextBox. It does not allow me to do this beucause i guess when the AppSettings is being initialized and a Radio Input is checked every toolbox is null.
The Settings page is being initialized after the AppSettings so how i am gonna do this?
If i run the below code it gives me nullreferenceexception in the line:
EnterRadiusBox.Visibility = Visibility.Collapsed;
I hope you understand me.
Here is the Code i Have So Far in The Settings Page:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
namespace MyAPP
{
public partial class Page1 : PhoneApplicationPage
{
public Page1()
{
InitializeComponent();
}
private void OffersFromRadius_Checked(object sender, RoutedEventArgs e)
{
EnterRadiusBox.Visibility = Visibility.Visible;
RadiusExplain.Visibility = Visibility.Visible;
}
private void OffersFromCity_Checked(object sender, RoutedEventArgs e)
{
EnterRadiusBox.Visibility = Visibility.Collapsed;
RadiusExplain.Visibility = Visibility.Collapsed;
}
}
}
And Here is my Settings.xaml
<phone:PhoneApplicationPage
x:Class="MyAPP.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
xmlns:local="clr-namespace:SettingsHandle"
ApplicationBar = "{StaticResource GlobalAppBar}"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<local:AppSettings x:Key="appSettings"></local:AppSettings>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MyAPP" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="Settings" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="14,0,10,0">
<TextBlock HorizontalAlignment="Left" Margin="151,27,0,0" TextWrapping="Wrap" Text="Show Offers From" VerticalAlignment="Top" Height="30" Width="167"/>
<RadioButton x:Name="OffersFromCity" Content="My City" HorizontalAlignment="Left" Margin="67,57,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.818,0.428" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=OffersFromCitySetting, Mode=TwoWay}" Checked="OffersFromCity_Checked" />
<RadioButton x:Name="OffersFromRadius" Content="A Radius" HorizontalAlignment="Left" Margin="246,57,0,0" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=OffersFromRadiusSetting, Mode=TwoWay}" Checked="OffersFromRadius_Checked" />
<TextBox x:Name="EnterRadiusBox" HorizontalAlignment="Left" Height="72" Margin="92,124,0,0" TextWrapping="Wrap" Text="60" VerticalAlignment="Top" Width="296" InputScope="Number" />
<TextBlock x:Name="RadiusExplain" HorizontalAlignment="Left" Margin="56,196,0,0" TextWrapping="Wrap" Text="I want to hide this value or make it visible." VerticalAlignment="Top" Height="84" Width="364" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
This should better be solved with XAML bindings, instead of C# code.
Add the Cimbalino lib to your project or add a BooleanToVisibilityConverter on your own.
If you use Cimablino, add the following namespace to the <Application
...></Application> root node inside your App.xaml:
xmlns:conv="clr-namespace:Cimbalino.Phone.Toolkit.Converters;assembly=Cimbalino.Phone.Toolkit"
and add this converter below <Application.Resources> in the App.xaml:
<conv:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
Then you can bind the visibility of your TextBox/TextBlock to the matching Radiobox in your own code:
<RadioButton x:Name="OffersFromCity" GroupName="GroupOne" ... />
<RadioButton x:Name="OffersFromRadius" GroupName="GroupOne" ... />
<TextBox x:Name="EnterRadiusBox" Visibility="{Binding IsChecked, ElementName=OffersFromRadius, Converter={StaticResource BooleanToVisibilityConverter}}" ... />
<TextBlock x:Name="RadiusExplain" Visibility="{Binding IsChecked, ElementName=OffersFromRadius, Converter={StaticResource BooleanToVisibilityConverter}}" ... />
In the Binding of the Visibility you say that the property IsChecked from the element with the name OffersFromRadius should be used. Because the Visibility property does not know what a bool is, we need the converter. This converter translates the bool to the matching Visibility.
I created the UserControl which has textblock in VS2010 Express for Windows Phone and added it on the MainPage.xaml. However, I would like to set the text on the the textblock either in codebehind or .xaml file. Would anyone show or give an example or link to me. Thank in advance.
<UserControl x:Class="PhoneApp1.TitleControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot">
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,10,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource appTitleStyle}"/>
<Grid Height="45" Style="{StaticResource pageTitleBackgroudStyle}">
<TextBlock x:Name="PageTitle" Margin="9,-7,0,17" Style="{StaticResource pageTitleStyle}"/>
</Grid>
</StackPanel>
</Grid>
This is my MainPage.xaml:
<StackPanel x:Name="Titleqq" Grid.Row="0" Margin="12,17,0,28" Grid.ColumnSpan="2">
<local:TitleControl x:name="Title" />
</StackPanel>
There are two things to note when writing a usercontrol.
Write a class that defines properties in your usercontrol.
Bind it to the properties that you wish to expose or set in your windows phone application.
So your Usercontrol would Ideally have,
UserControl.xaml
UserControl.xaml.cs
You write your class in cs file. Bind it to the properties that you want to set in your application. So in this case you do something like this,
<UserControl x:Class="PhoneApp1.TitleControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
x:Name="parent"
>
<Grid x:Name="LayoutRoot"
DataContext="{Binding ElementName=parent}">
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,10,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource appTitleStyle}"/>
<Grid Height="45" Style="{StaticResource pageTitleBackgroudStyle}">
<TextBlock x:Name="PageTitle" Text="{Binding Path=Text"} Margin="9,-7,0,17" Style="{StaticResource pageTitleStyle}"/>
</Grid>
</StackPanel>
</Grid>
Now in your code behind write a class that inherits from UserControl and bind it...
Link1 and google on msdn Windows phone UserControl class.
Follow the link->
How to make the screen dim after few seconds and after a tap it should be bright.Is that possible ?
For now, there is no way to control programmatically the brightness of the screen.
I guess you could get creative with it - how about putting up a partially transparent control (maybe Background="#66000000") over the whole screen when you want to dim it, and on tap on that control it gets removed? That would give you the effect you're looking for without having to go into system internals. It really depends whether you want the controls on the page to be available for interaction while the screen is dimmed.
So your Page.xaml would look like this...
<phone:PhoneApplicationPage
x:Class="ScreenDimmer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
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"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style=" {StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style=" {StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Name="ControlStacker">
<TextBlock Text="My input 1" />
<TextBox Name="Input1Value" TextChanged="Input1Value_TextChanged" />
<TextBlock Text="My input 2" />
<TextBox Name="Input2Value" TextChanged="Input1Value_TextChanged" />
<TextBlock Text="My input 3" />
<TextBox Name="Input3Value" TextChanged="Input1Value_TextChanged" />
</StackPanel>
</Grid>
<Canvas Grid.RowSpan="2" Margin="0" Height="800" Width="480" Background="#66000000" Name="DimmerControl" MouseLeftButtonUp="DimmerControl_MouseLeftButtonUp" Visibility="Collapsed" />
</Grid>
</phone:PhoneApplicationPage>
and in your code behind, something like this...
public partial class MainPage : PhoneApplicationPage
{
DispatcherTimer dimmerTimer;
// Constructor
public MainPage()
{
InitializeComponent();
dimmerTimer = new DispatcherTimer();
dimmerTimer.Tick += dimmerTimer_Tick;
dimmerTimer.Interval = TimeSpan.FromSeconds(5);
dimmerTimer.Start();
}
void dimmerTimer_Tick(object sender, EventArgs e)
{
DimDisplay();
}
void DimDisplay()
{
DimmerControl.Visibility = System.Windows.Visibility.Visible;
}
void UndimDisplay()
{
DimmerControl.Visibility = System.Windows.Visibility.Collapsed;
}
private void DimmerControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
UndimDisplay();
}
private void Input1Value_TextChanged(object sender, TextChangedEventArgs e)
{
UndimDisplay();
dimmerTimer.Stop();
dimmerTimer.Start();
}
}
Note : This is a very simple proof of concept, and doesn't handle resetting the undimming timer when you do anything other than change the textbox values, but it will give you an idea. It also doesn't handle dimming the SIP, but there's not too much you can do about that other than explicitly removing focus from an input box.