Is there a way to add semi transparent layer for the application in UWP?
In normal .NET there is a possibility, but in UWP I cant find it.
I need this behavior, for make the whole application inactive except one control, and display a tooltip next to the control. It is need for tuturial in application
Thanks for everyone!
I'm imagining you need some sort of BlockUI/UnBlockUI behavior, not sure if there's a 3rd party for that, but you can be creative in order to achieve that.
By taking advantage of ZIndex, Opacity, DependencyProperty and some event handling, you can achieve that.
xaml
<Page x:Name="root"
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
d:DesignHeight="450" d:DesignWidth="800">
<Canvas Background="AliceBlue">
<Rectangle Canvas.Left="30" Canvas.ZIndex="{Binding BlockerZIndex, ElementName=root}" Width="180" Height="200" Fill="White" Opacity="0.5"/>
<Button Canvas.ZIndex="1" Canvas.Left="30" Canvas.Top="70" Content="Send Email" Width="150" Height="50" Background="Blue" Foreground="Black" />
<Button Canvas.ZIndex="1" Canvas.Left="30" Canvas.Top="140" Content="Print Receipt" Width="150" Height="50" Background="Blue" Foreground="Black" />
<Button x:Name="BlockUnBlockUIButton" Canvas.Left="30" Canvas.ZIndex="1" Canvas.Top="210" Width="150" Height="50" Background="Blue" Foreground="Black" Click="BlockUnBlockUIButton_OnClick" >
<TextBlock Text="Block/UnBlock UI" ToolTipService.ToolTip="Block/Unblock UI"/>
</Button>
</Canvas>
</Page>
code-behind
using Windows.UI.Xaml;
namespace App1
{
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
}
public static readonly DependencyProperty BlockerZIndexProperty =
DependencyProperty.Register(
nameof(BlockerZIndex),
typeof(int),
typeof(MainPage),
new PropertyMetadata(2));
public int BlockerZIndex
{
get => (int)GetValue(BlockerZIndexProperty);
set => SetValue(BlockerZIndexProperty, value);
}
private void BlockUnBlockUIButton_OnClick(object sender, RoutedEventArgs e)
{
BlockerZIndex = BlockerZIndex == 1 ? 2 : 1;
}
}
}
Related
I am new to WPF, and I am trying to make an RPG using 2D Sprite gif files for animations for walking forward, backward, etc.
I am having issues making the original picture move in any direction using the arrow keys. Here is the snippet of code:
<UserControl x:Class="TextofTheWild2._0.Screen1"
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"
xmlns:gif="https://github.com/XamlAnimatedGif/XamlAnimatedGif"
xmlns:local="clr-namespace:TextofTheWild2._0"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
FocusManager.FocusedElement = "{Binding ElementName=MyCanvas}">
<Canvas x:Name="MyCanvas" HorizontalAlignment="Right" Height="450" VerticalAlignment="Top" Width="800" Background="#FFFCD8A8" KeyDown="Canvas_OnKeyDown" Focusable="True" FocusManager.FocusedElement="{Binding RelativeSource={RelativeSource Self}}">
<Grid HorizontalAlignment="Left" Height="190" VerticalAlignment="Top" Width="410" Background="#FF00A800" Canvas.Left="390"/>
<TextBlock Height="40" Canvas.Left="149" TextWrapping="Wrap" Text="Press E to activate" Canvas.Top="40" Width="52" FontFamily="Microsoft Sans Serif" Visibility="Collapsed"/>
<Grid HorizontalAlignment="Left" Height="190" VerticalAlignment="Top" Width="27" Background="#FF00A800"/>
<Grid HorizontalAlignment="Left" Height="26" VerticalAlignment="Top" Width="85" Background="Black" Canvas.Left="27" Canvas.Top="35"/>
<Grid HorizontalAlignment="Left" Height="35" VerticalAlignment="Top" Width="112" Background="#FF00A800"/>
<Grid HorizontalAlignment="Left" Height="181" VerticalAlignment="Top" Width="27" Background="#FF00A800" Canvas.Top="269"/>
<Grid HorizontalAlignment="Left" Height="181" VerticalAlignment="Top" Width="22" Background="#FF00A800" Canvas.Left="778" Canvas.Top="269"/>
<Grid HorizontalAlignment="Left" Height="80" VerticalAlignment="Top" Width="800" Background="#FF00A800" Canvas.Top="370"/>
<Image Name="Green_Link" Height="93" VerticalAlignment="Top" Canvas.Left="480" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Green Link idle.gif" Source="Assets/Green Link idle.gif" Focusable="True"/>
<Image Name="Blue_Link" Height="93" VerticalAlignment="Top" Canvas.Left="390" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Blue Link idle.gif" Source="Assets/Blue Link idle.gif"/>
<Image Name="Red_Link" Height="93" VerticalAlignment="Top" Canvas.Left="305" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Red Link Idle.gif" Source="Assets/Red Link Idle.gif"/>
<Image Name="Purple_Link" Height="93" VerticalAlignment="Top" Canvas.Left="220" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Purple Link idle.gif" Source="Assets/Purple Link idle.gif"/>
</Canvas>
</UserControl>
For XAML, and the code behind it:
public partial class Screen1 : UserControl
{
public Screen1()
{
InitializeComponent();
}
private void Canvas_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Down)
{
Canvas.SetTop(Green_Link, Canvas.GetTop(Green_Link) + 10);
}
else if (e.Key == Key.Up)
{
Canvas.SetTop(Green_Link, Canvas.GetTop(Green_Link) - 10);
}
else if (e.Key == Key.Left)
{
Canvas.SetLeft(Green_Link, Canvas.GetLeft(Green_Link) - 10);
}
else if (e.Key == Key.Right)
{
Canvas.SetLeft(Green_Link, Canvas.GetLeft(Green_Link) + 10);
}
}
}
Before I start working on transitional animations, I would like to at least get the images to move in the canvas. Thanks!
Looks like you've put your C# code in the wrong place. The start of your XAML file says this:
<x:Name="WINDow" x:Class="TextofTheWild2._0.GameWindow" ...
This means that your xaml file is partially defining a class called GameWindow. This'll be made up of two files, the xaml and the codebehind (which has extension .xaml.cs). When you handle an event in xaml like you're doing (ie. KeyDown="Canvas_OnKeyDown"), it gets routed to a function in the codebehind for that view.
If you put your Canvas_KeyDown method in GameWindow.xaml.cs (and rename the method to Canvas_OnKeyDown - you were missing an On), WPF should pick up and it should work correctly.
I have a simple UWP app defined as follows:
using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace SizeChangedBug
{
public sealed partial class MainPage : Page
{
public MainPage() {
this.InitializeComponent();
this.Rectangle.SizeChanged += Rectangle_SizeChanged;
}
private void Rectangle_SizeChanged(object sender, SizeChangedEventArgs e) {
Debug.WriteLine("Rectangle_SizeChanged");
}
}
}
<Page
x:Class="SizeChangedBug.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SizeChangedBug"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Canvas>
<Slider x:Name="Slider" Orientation="Vertical" Width="80" Height="300" Value="400" Minimum="0" Maximum="600" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Rectangle x:Name="Rectangle" Margin="200,200" Width="{Binding Value, ElementName=Slider}" Height="{Binding Value, ElementName=Slider}" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Canvas>
</Page>
The problem is that SizeChanged never fires and Rectangle_SizeChanged never gets called when the size of Rectangle changes. Am i missing something or it's a bug in UWP? The below XAML with Canvas replaced with Grid works.
<Page
x:Class="SizeChangedBug.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SizeChangedBug"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Slider x:Name="Slider" Orientation="Vertical" Width="80" Height="300" Value="400" Minimum="0" Maximum="600" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Rectangle x:Name="Rectangle" Margin="200,200" Width="{Binding Value, ElementName=Slider}" Height="{Binding Value, ElementName=Slider}" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</Page>
Canvas uses absolute positioning as its layout technique for its contained child elements. So SizeChanged event of the child will not trigger. It doesn't consider sizing or scaling. it depends on x,y coordinates. I am quoting exact lines from Microsoft document.
https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.canvas#remarks
Because absolute positioning does not take into account the size of
the app window, scaling, or other user-selected sizing, using a
container element that adapts to different orientations and screen
settings, such as Grid or StackPanel, is often a better choice than
using Canvas.
You can read more about it in Layout Panels
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.
At the minute I have a view which populates a ListView with tiles bound to a list of users. OnClick of any of these Tiles(buttons) I need to dynamically create a small draggable window consisting of a StackPanel containing an ScrollViewer&ItemsControl, Textbox and Button. This will then have to be bound to an ObservableCollection based on which user Tile was clicked.
This will be used in a private chat scenario.
I have already implemented a group chat bound to an ObservableCollection but this is created on navigation to the page.
I have started by adding the same set of controls to a dataTemplate to Resources.xaml but am quite lost as to where to go next.
<DataTemplate x:Key="PrivateChatTemplate">
<StackPanel Width="267" Height="300" >
<ScrollViewer x:Name="PrivateScrollViewer" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" >
<ItemsControl Name="PrivateItemsControl" Foreground="Black" />
</ScrollViewer>
<TextBox x:Name="PrivateTextBox" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="201" Height="60" BorderThickness="1" BorderBrush="Black"/>
<Button x:Name="PrivateSendButton" Content="Send" HorizontalAlignment="Left" Height="58" Margin="65,2,0,0" VerticalAlignment="Top" Width="66" Click="PrivateSendButton_Click" Background="Black"/>
</StackPanel>
</DataTemplate>
Thanks for any help.
Funny you mentioned a ScrollViewer since that gave me an idea for using a ScrollViewer to position a foreground window-like control in front of other content and it's fairly simple.
Inside your page - put a ScrollViewer that extends to the full size of the app window (by setting both VerticalAlignment and HorizontalAlignment to Stretch), that has a Panel like a Canvas or Grid inside of it and place the window/UserControl inside of it - like the Rectangle in the code below. Make sure the ScrollViewer can scroll both ways by setting the -ScrollMode/-ScrollBarVisibility values and the size of the panel to be larger than the ScrollViewer's ViewportWidth and ViewportHeight. You should handle SizeChanged event on the ScrollViewer and the window inside of it and set the panel's Width and Height to something like
panel.Width = scrollViewer.ViewportWidth * 2 - window.ActualWidth;
panel.Height = scrollViewer.ViewportHeight * 2 - window.ActualWidth;
Now everything should become scrollable by touch. The remaining problem is handling mouse input which you can do based on Pointer- events on the window.
XAML
<Page
x:Class="DraggableWindow.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DraggableWindow"
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
Content="Button"
HorizontalAlignment="Left"
Height="99"
Margin="112,101,0,0"
VerticalAlignment="Top"
Width="119" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="985,389,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="403,581,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="112,277,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="682,129,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="551,371,0,0"
VerticalAlignment="Top"
Width="262" />
<ScrollViewer
x:Name="scrollViewer"
SizeChanged="OnScrollViewerSizeChanged"
Background="{x:Null}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
IsHorizontalRailEnabled="False"
IsVerticalRailEnabled="False">
<Canvas
x:Name="panel">
<Rectangle
x:Name="window"
SizeChanged="OnWindowSizeChanged"
PointerPressed="OnWindowPointerPressed"
PointerMoved="OnWindowPointerMoved"
PointerReleased="OnWindowPointerReleased"
Fill="LightGray"
Width="200"
Height="150"/>
</Canvas>
</ScrollViewer>
</Grid>
</Page>
C#
using Windows.Devices.Input;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
namespace DraggableWindow
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private uint pointerId;
private Point lastPoint;
private void OnWindowPointerPressed(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.PointerDeviceType == PointerDeviceType.Mouse)
{
window.CapturePointer(e.Pointer);
this.pointerId = e.Pointer.PointerId;
this.lastPoint = e.GetCurrentPoint(window).Position;
}
}
private void OnWindowPointerMoved(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.IsInContact &&
e.Pointer.PointerId == pointerId)
{
var point = e.GetCurrentPoint(window).Position;
this.scrollViewer.ChangeView(
this.scrollViewer.HorizontalOffset - point.X + lastPoint.X,
this.scrollViewer.VerticalOffset - point.Y + lastPoint.Y,
null,
true);
}
}
private void OnWindowPointerReleased(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.PointerId == pointerId)
{
window.ReleasePointerCapture(e.Pointer);
}
}
private void OnScrollViewerSizeChanged(object sender, SizeChangedEventArgs e)
{
UpdateWindowingLayout();
}
private void OnWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
UpdateWindowingLayout();
}
private void UpdateWindowingLayout()
{
this.panel.Width = this.scrollViewer.ViewportWidth * 2 - 0.0 * this.window.ActualWidth;
this.panel.Height = this.scrollViewer.ViewportHeight * 2 - 0.5 * this.window.ActualHeight;
Canvas.SetLeft(this.window, this.scrollViewer.ViewportWidth - 0.5 * this.window.ActualWidth);
Canvas.SetTop(this.window, this.scrollViewer.ViewportHeight - 0.5 * this.window.ActualHeight);
}
}
}
Oh and to make it all dynamic - wrap it in a UserControl to handle the events there and put that in a Popup. I'll see about wrapping all that in a reusable control when I get a chance, since I need something like that too for my visual tree debugger overlay.
#Filip Skakun Unfortunately I have to use 8.0 as opposed to 8.1, so don't have the new ChangeView method. I have attempted to make a custom UserControl but I'm not sure how to handle the SizeChanged and UpdateWindowingLayout since the windows will be created on click of a button essentially and dynamically created. I then need to bind a list of strings to the ItemsControl inside the UserControl.
`Unfortunately I have to use 8.0 as opposed to 8.1, so don't have the new ChangeView method. I have attempted to make a custom UserControl but I'm not sure how to handle the SizeChanged and UpdateWindowingLayout(to implement the dragging) since the windows will be created on click of a button essentially and dynamically created. I then need to bind a list of strings to the ItemsControl inside the UserControl. '
<UserControl
x:Class="KeyOui.View.PrivateChatWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:KeyOui.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="200"
d:DesignWidth="300">
<StackPanel Background="Indigo">
<ScrollViewer>
<ItemsControl Name="PrivateChatItemsControl" ItemsSource="{Binding ListOfMessages.Name}" Width="Auto" Height="150" Foreground="Black" BorderBrush="Gray" BorderThickness="2" />
</ScrollViewer>
<StackPanel VerticalAlignment="Stretch" Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBox x:Name="GroupChatTextBox" VerticalAlignment="Bottom" TextWrapping="Wrap" FontSize="14" Width="140" Height="40" Margin="5,5,5,5" BorderThickness="1" BorderBrush="Gray"/>
<Button x:Name="SendButton" Content="Send"
HorizontalAlignment="Left" Height="40"
VerticalAlignment="Top" Width="Auto"
Click="SendButton_Click" Margin="5,5,5,5"
BorderThickness="1" BorderBrush="Gray"/>
</StackPanel>
</StackPanel>
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.