In my Windows Store app (c#) i have Popup:
<Popup x:Name="LoginPopup" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="300" IsOpen="{Binding Path=LoginPopupIsOpen}">
<Popup.ChildTransitions>
<TransitionCollection>
<PopupThemeTransition />
</TransitionCollection>
</Popup.ChildTransitions>
</Popup>
And when Popup IsOpen I need handle events only on Popup and freeze all another UI (including AppBar). It is possible without creating full screen popup with little work area?
You can do it in the xaml.cs file by using two properties.
In the event handler for the popup you are creating you can include the following two lines
this.IsEnabled = false;
this.ApplicationBar.IsVisible = false;
in the event handler where you want to close the popup, you can revert the properties back to their original values.
this.IsEnabled = true;
this.ApplicationBar.IsVisible = true;
I was also facing similar problem and used this to handle that.
private void AlertMessage_Opened(object sender, object e)
{
UIBlock.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
private void AlertMessage_Closed(object sender, object e)
{
UIBlock.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
My popup name was AlertMessage and I attack opened and closed events with it and place a border in xaml which covers whole screen, and handle is visibility through these events.
<Border Name="UIBlock" Grid.Row="0" Grid.RowSpan="3" Background="#AAFFFFFF" Visibility="Collapsed">
</Border>
And remember to place this border before popup
I have made small popup using below code.Please try this.
<Grid Background="Black" Opacity="0.7" Visibility="Collapsed" x:Name="gdalert" Height="{Binding Height, ElementName=gdfullpage}" Width="{Binding Width, ElementName=gdfullpage}">
<Popup x:Name="settingpopup" Width="350" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border x:Name="settingbdrmain" Grid.Row="1" BorderThickness="0" Width="350" CornerRadius="15" >
<Grid x:Name="gdsubshape" Margin="0,10,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Margin="0,0,0,0" Grid.Row="0" x:Name="dddf" FontSize="20" Text="" HorizontalAlignment="Center" TextAlignment="Center" FontFamily="Arial" FontWeight="Bold" TextWrapping="Wrap" ></TextBlock>
<TextBlock x:Name="txtsettingalert" Text="" FontSize="20" TextAlignment="Center" Width="300" FontFamily="Arial" TextWrapping="Wrap" Foreground="Black" Grid.Row="1" ></TextBlock>
<Border x:Name="settingbdr" Width="350" Grid.Row="2" Height="1" Background="Red" BorderBrush="Black" >
</Border>
<Grid x:Name="btnpanel" Grid.Row="3" Height="60">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto">/ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="settingok" Grid.Column="0" Height="50" HorizontalAlignment="Left"VerticalAlignment="Center" MinHeight="20" Width="170" Content="OK" FontSize="24" Foreground="Green" ></Button>
<Border x:Name="settingsubbdr" Grid.Column="1" BorderBrush="Green" Height="Auto" Width="1" ></Border>
<Button x:Name="sl" Grid.Column="2" Height="50" HorizontalAlignment="Right" VerticalAlignment="Center" MinHeight="20" Width="170" Content="Cancel" FontSize="24" Foreground="Green" ></Button>
</Grid>
</Grid>
</Border>
</Popup>
To Open Use :- popname.IsOpen = true; gdalert.Visibility = Visibility.Visible;
To Close popname.IsOpen = false; gdalert.Visibility = Visibility.Collapse;
Related
I developed an UWP application that's having a wrong behavior on new version of Windows 10. In my application i have some ContentDialog with some TextBox inside them and when the soft-keyboard is shown it should push upwards the contentdialog but in new build of windows 10 this is not happening, anyone know why?
Here is a sample of my ContentDialog code:
<ContentDialog
x:Class="ManImp.CDEseguiOdM"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ManImp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
MaxHeight="{StaticResource ContentDialogMaxHeight}"
MaxWidth="{StaticResource ContentDialogMaxWidth}"
Margin="0"
Padding="0">
<Grid Background="{ThemeResource ApplicationBackGroudColor}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<!--0-->
<RowDefinition Height="Auto"></RowDefinition>
<!--0-->
<RowDefinition Height="Auto"></RowDefinition>
<!--1-->
<RowDefinition Height="Auto"></RowDefinition>
<!--2-->
<RowDefinition Height="Auto"></RowDefinition>
<!--3-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" x:Name="stckLabelFirma" Grid.Row="0" Grid.Column="0">
<TextBlock x:Name="lblFirma" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="24" Foreground="White" FontWeight="Normal" HorizontalAlignment="Center" Margin="0,0,0,5"></TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="0">
<InkToolbar InitialControls="None" VerticalAlignment="Top" HorizontalAlignment="Right" TargetInkCanvas="{x:Bind inkCanvasFirma}" >
<InkToolbarEraserButton />
<InkToolbarBallpointPenButton />
</InkToolbar>
<Grid BorderBrush="Black" BorderThickness="1">
<Image Name="imgFirma" Stretch="Uniform"></Image>
<InkCanvas x:Name="inkCanvasFirma" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></InkCanvas>
</Grid>
</StackPanel>
<StackPanel Orientation="Vertical" x:Name="stckDatiSupProd" Grid.Row="2" Grid.Column="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<!--0-->
<ColumnDefinition Width="*"></ColumnDefinition>
<!--1-->
<ColumnDefinition Width="*"></ColumnDefinition>
<!--2-->
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="0,10,5,0">
<TextBlock x:Name="lblCID" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="20" Foreground="#FF034872" FontWeight="Bold" HorizontalAlignment="Left" Margin="0,0,0,0"></TextBlock>
<TextBox x:Name="txtCID" BorderBrush="Red" MaxLength="8" TextChanged="txtCID_TextChanged" VerticalAlignment="Center" Background="White" HorizontalAlignment="Stretch" Margin="0,10,0,0" TextWrapping="Wrap" FontSize="20"></TextBox>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="5,10,5,0">
<TextBlock x:Name="lblAlias" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="20" Foreground="#FF034872" FontWeight="Bold" HorizontalAlignment="Left" Margin="0,0,0,0"></TextBlock>
<TextBox x:Name="txtAlias" BorderBrush="Red" TextChanged="txtAlias_TextChanged" VerticalAlignment="Center" Background="White" HorizontalAlignment="Stretch" Margin="0,10,0,0" TextWrapping="Wrap" FontSize="20"></TextBox>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2" Margin="5,10,0,0">
<TextBlock x:Name="lblPIN" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="20" Foreground="#FF034872" FontWeight="Bold" HorizontalAlignment="Left" Margin="0,0,0,0"></TextBlock>
<PasswordBox x:Name="txtPIN" BorderBrush="Red" PasswordChanged="txtPIN_PasswordChanged" VerticalAlignment="Center" Background="White" HorizontalAlignment="Stretch" Margin="0,10,0,0" FontSize="20"></PasswordBox>
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="3" Grid.Column="0" Margin="0,10,0,0">
<TextBlock x:Name="lblErrore" Visibility="Collapsed" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="14" Foreground="Red" FontWeight="Bold" HorizontalAlignment="Left" Margin="0,5,0,0"></TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="4" Margin="0,10,0,0" Grid.Column="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<!--0-->
<ColumnDefinition Width="*"></ColumnDefinition>
<!--1-->
</Grid.ColumnDefinitions>
<Button x:Name="btnAnnulla" Grid.Column="0" HorizontalAlignment="Stretch" Margin="0,30,10,0" VerticalAlignment="Top" Click="btnAnnulla_Click"></Button>
<Button x:Name="btnConfFirmaSupProd" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,30,0,0" VerticalAlignment="Top" Click="btnConfFirmaSupProd_Click"></Button>
<Button x:Name="btnConfFirmaOperatore" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,30,0,0" VerticalAlignment="Top" Click="btnConfFirmaOperatore_Click"></Button>
</Grid>
</StackPanel>
</Grid>
This should be an issue related to the old SDK that when the app is targeting old versions like 14393.
If you really want to achieve this behavior on all versions of Windows 10. I'd suggest you handle the showing and hiding events manually via InputPane.Showing Event and InputPane.Hiding Event. And then you might need to customize a PopUp control that looks like a ContentDialog. We can't change the position of the ContentDialog, because it is handled by the system. But we could change the position of a PopUp control.
When the on-screen keyboard is shown, the showing event will be fired and you could try to manually move your PopUp control upwards. When the keyboard is hidden, just move the PopUp control back to its original position.
Here is the sample code about how to handle the show and hide event:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
InputPane currentInputPane = InputPane.GetForCurrentView();
// Subscribe to Showing/Hiding events
currentInputPane.Showing += OnShowing;
currentInputPane.Hiding += OnHiding;
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
InputPane currentInputPane = InputPane.GetForCurrentView();
// Unsubscribe from Showing/Hiding events
currentInputPane.Showing -= OnShowing;
currentInputPane.Hiding -= OnHiding;
}
void OnShowing(InputPane sender, InputPaneVisibilityEventArgs e)
{
//do something
}
void OnHiding(InputPane sender, InputPaneVisibilityEventArgs e)
{
//do something
}
You could also get information about the touch keyboard here: Respond to the presence of the touch keyboard
In the textboxes from the code below, the blinking cursor doesn't show even after i click the textbox or when it has focus.I'm posting this big a code because i think perhaps it's the parent element properties that are somehow interfering with the texboxes but I can't seem to find a solution for this. Can someone please help.
<Canvas Name="encounterTab" Style="{StaticResource canvasRecording}" Visibility="Hidden" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" FocusManager.IsFocusScope="True">
<Grid Height="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenHeightKey}}" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" Margin="0,0,0,0" FocusManager.IsFocusScope="True">
<DockPanel Style="{StaticResource screenTitleDock}" Grid.Row="0" VerticalAlignment="Top" >
<TextBlock Name="textBlock1" Style="{StaticResource screenTitle}">ENCOUNTER DETAILS</TextBlock>
</DockPanel>
<Grid Style="{StaticResource gridRecording}" SizeChanged="MainGrid_SizeChanged" Name="gridEncDetails" FocusManager.IsFocusScope="True">
<Grid.LayoutTransform>
<ScaleTransform
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="188*"></ColumnDefinition>
<ColumnDefinition Width="149*"></ColumnDefinition>
<ColumnDefinition Width="63*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="lblApptTime" Content="Time:" Grid.Column="0" Grid.Row="0" />
<TextBox x:Name="txtTime" GotKeyboardFocus="txtApptTimeKeyBoadFocus" GotMouseCapture="txtApptTime_MouseClick" Grid.Column="1" Grid.Row="0" Width="149" LostFocus="txtApptTime_LostFocus" HorizontalAlignment="Left" MouseDoubleClick="txtApptTime_MouseDoubleClick" Margin="0,11" Height="38" GotTouchCapture="txtApptTime_GotTouchCapture" />
<ComboBox x:Name="ddlAmPm" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="2" Width="55" IsSynchronizedWithCurrentItem="True" Margin="0,10" HorizontalAlignment="Right" Height="38">
<ComboBoxItem>AM</ComboBoxItem>
<ComboBoxItem>PM</ComboBoxItem>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid >
<TextBlock Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Label x:Name="lblNo" Content="No:" Grid.Column="0" Grid.Row="1" Margin="0,11" Height="38" />
<TextBox x:Name="txtEncounterNumber" Grid.Column="1" Grid.Row="1" KeyDown="txtEncounterNumber_KeyUp" TextChanged="txtEncounterNumber_TextChanged" HorizontalAlignment="Left" Width="212" Margin="0,10" Grid.ColumnSpan="2" Height="Auto" />
<Button x:Name="btnNext1" Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource btnRec}" Click="btnNext1_Click" TouchUp="btnTouchNext1_Click" Margin="50,20,50,10" >
<Image Source="Assets/btnNext.png" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Canvas >
Note:- When i start typing the caret appears but disappears when i clear the textbox values.
It looks like you problem might comes from the ScaleTransform. If a TextBox is scaled to less then it's original size it's cursor disappears. This happens because the TextBox caret is with Width of 1 and when scaled down it becomes less then 1. So it's not visualized at all.
As a workaround make the minimal possible size as default so UI is only scaled up.
Another workaround it to create a custom caret like it's shown here WPF TextBox Inside ViewBox loses Cursor on resize
I have just started learning windows app development. Like what do we call it (A dialog box, Contentdialogbox, Message Dialog)? Thanks in advance.
Okay I tried this since I have my data in a datatemplate inside a contentpresenter(Making a master detail view) now when user clicks on a icon the popup should open and also display the data related to that event selected inside that list.How do I achieve this since the popup dialog control is defined inside a datatemplate so in my cs file it does not recognize the control so I am not able to open the popup dialog.
Xaml Code:
<DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Section2" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" />
</Grid.Background>
<TextBlock MaxWidth="250"
Margin="36,62,34,68"
FontFamily="Baskerville Old Face"
FontSize="30"
Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}"
TextWrapping="WrapWholeWords"
d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition">
<Run Text="Gravitas Premier League" />
</TextBlock>
</Grid>
<Grid x:Name="Content"
Grid.Row="1"
Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<RelativePanel>
<SymbolIcon x:Name="symbol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Globe" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Category" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Center">
<RelativePanel>
<SymbolIcon x:Name="symboll"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="People" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symboll"
Style="{ThemeResource BaseTextBlockStyle}"
Text="SubCategory" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="2" HorizontalAlignment="Right">
<RelativePanel>
<SymbolIcon x:Name="symbllol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Bullets" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbllol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Rupee" />
</RelativePanel>
</StackPanel>
</Grid>
<TextBlock Grid.Row="2"
HorizontalAlignment="Center"
Style="{ThemeResource ScenarioDescriptionTextStyle}"
Text="{x:Bind description}"
TextWrapping="WrapWholeWords" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Phone" />
<SymbolIcon Grid.Column="1"
x:Name="People"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="People"
IsTapEnabled="True"
Tapped="ShowPopupOffsetClicked"
/>
<SymbolIcon Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Mail" />
</Grid>
</Grid>
</DataTemplate>
Now how do I open up the popup when the user taps the symbol with the name People and with necessary bindings of data with a observablecollection say EventList.
There are a lot of ways to implement the UI like in your screenshot. As you've added template10 in your question, I suppose you are using Template10 in your project. And in Template10, we can use ModalDialog to implement this. Here I use a Minimal Template 10 project for example.
Firstly, we may need to change ModalBackground to make the background color looks like what in your screenshot. As the ModalDialog we used here is the root frame created by Bootstrapper automatically, so we need override CreateRootElement in App.xaml.cs like:
public override UIElement CreateRootElement(IActivatedEventArgs e)
{
var b = Current;
var frame = new Windows.UI.Xaml.Controls.Frame();
var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame);
//change background
var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
background.Opacity = 0.2;
return new Template10.Controls.ModalDialog
{
ModalBackground = background,
DisableBackButtonWhenModal = true,
Content = nav.Frame
};
}
Then we can edit Busy.xaml to implement the panel in your screenshot. In Busy.xaml, it's a UserControl used as the ModalContent of ModalDialog. For example,
<UserControl x:Class="T10Minimal.Views.Busy"
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:local="using:T10Minimal.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid Width="300"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="White"
CornerRadius="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
...
</Grid.RowDefinitions>
<TextBlock Margin="20,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="Black">
Song Options
</TextBlock>
<Button Margin="12"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="CloseClicked"
Foreground="Black"
Style="{StaticResource TextBlockButtonStyle}">
<SymbolIcon Symbol="Clear" />
</Button>
...
</Grid>
</UserControl>
The bindings might like the BusyText in the original control, you can change its type to your binding data's type and also change the SetBusy method. After this, you can call SetBusy method in your ShowPopupOffsetClicked method to open the "popup".
This is just a simple sample, you can refer to it to implement your own. And in the sample, I used the ModalDialog created as the root frame of the application. If you need more than one ModalDialog, you can refer to Search (and Login) Sample on GitHub.
I have a grid with an tap event and in this grid three more buttons with click event. The first (the middle) button is working, but the others are not. If I click on it the grid event is fired instead of the button event. And i didn't know why?
<Page
....
<Grid Background="{ThemeResource BackgroundBrush}" Tapped="Grid_Tapped">
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition Height="80"/>
<RowDefinition Height="10"/>
<RowDefinition Height="*"/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Border Grid.Row="2" Background="#BEBEBE"/>
<Border Grid.Row="3" Background="#BEBEBE"/>
....
<Button x:Name="btnGoToContent" Content="" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.Row="3" Margin="0,0,0,20" Height="80" Width="320" Click="btnGoToContent_Click" Style="{StaticResource ButtonStyle2}" Opacity="0.7"/>
<Button x:Name="btnDiashowBack" Content="" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Margin="0,0,0,0" Height="220" Width="220" Click="btnDiashowBack_Click" Style="{StaticResource BackButtonStyle}" Opacity="0.7"/>
<Button x:Name="btnDiashowNext" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="3" Margin="0,0,0,0" Height="220" Width="220" Click="btnDiashowNext_Click" Style="{StaticResource BackButtonMirror}" Opacity="0.7"/>
</Grid>
I don't know why it isn't working. But I've solved it with this Workaround. Skip the event in the grid event handler
private async void Grid_Tapped(object sender, TappedRoutedEventArgs e) {
if (e.OriginalSource.GetType() == typeof(TextBlock))
{
return;
}
.......
}
I'm trying to put a <Border/> around a <Grid/> in a page, however the border appears to be bordering the page rather than the grid.
This is only XAML in my page element.
<Border Background="Black">
<Grid Background="{ThemeResource ControlBackgroundBrush}" x:Name="LoginCredentials" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Username:" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right" Margin="5"/>
<TextBox x:Name="UserName" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" Grid.Row="0" Grid.Column="1" TextChanged="UserChange" Margin="5"/>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click" Grid.Row="2" HorizontalAlignment="Right" Margin="5" TabIndex="0"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
As a test I created a resource to fill the background of the <Grid/> with a colour and also filled the background of the <Border/> with a different colour. The <Grid/> ends up as a box in the center of the screen as intended, but the border <Border/> fills the entire screen. Can anyone tell me why this happens and how to get the <Border/> to fit around the <Grid/> as I want?
Got it!
<Border Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
....
</Border>
As soon as i posted the question, what i was missing became clear!