I dont see textblock or textbox in APP (XAML) (Visual Studio) - visual-studio

I tried to add a textbox and textblock to register page and in the preview its looks like that:
enter image description here
But when I run the project I see only the background without the textbox or the textblocks.
I tried to change to order or anything but without the background its just white blank page so the background does not hidding the text.
Thanks for helping.
The code:
<Page
x:Class="App2.RegisterPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
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 Name="g1">
<Grid.Background>
<ImageBrush ImageSource="/IMAGES/Reg.png" Stretch="Fill"/>
</Grid.Background>
<TextBlock Margin="719,291,404,588" FontSize="105" FontFamily="Gisha" FontWeight="ExtraBold" Text="הרשמה"/>
<TextBox FontSize="50" Name="age" Text="גיל" Height="100" Margin="802,419,330,481" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBox FontSize="50" Name="location" Text="מקום מגורים" Height="100" Margin="802,519,330,381"/>
<TextBox FontSize="50" Name="username" Text="שם משתמש" Height="100" Margin="802,619,330,281" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>

I believe your TextBox's height and/or width is interfering with the xaml app's height and/or width
For Example..
My xaml app's borders(width, height) were 15 and 19, and the TextBox's borders(width, height) were 16, 20 -- That would interfere with app's borders, making the TextBox invisible, or, in simple terms, textBox1.Visible = false;
Just either downsize your TextBox, or up-size your xaml app.
Happy to help :)

Related

Universal Windows 10 - How to add button in title bar like Microsoft Edge?

I use Extend View into titlebar like this:
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
And my Xaml code is:
<Page
x:Class="ProjectX.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ProjectX"
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}">
<Grid Background="#263238" Height="32" VerticalAlignment="Top" RequestedTheme="Dark">
<TextBlock Text="Title Bar" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button Width="50" Height="32" Click="Button_Click"/>
</Grid>
<TextBlock x:Name="txtTest" Text="AAAAAAAAAA" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black"/>
</Grid>
The button can't click. Help me!
You can add the back button
using Windows.UI.Core;
var currentView = SystemNavigationManager.GetForCurrentView();
currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
You have a full description here: https://marcominerva.wordpress.com/2015/05/19/easily-manage-the-title-bar-in-windows-10-apps/
In short, what you miss is that you must call a Window.Current.SetTitleBar method to set that only that control is used to handle window operations, while other controls will receive input regularly.

when keyboard is show, scrolling is limited

I have a problem with scrolling in windows phone. I have a lot of elements on page so to add ability to scroll I put this on ScrollViewer. Hovewer, when I foucesd on some text block and the keyborad shows up, the scroll in working but it cuts the top and bottom of the page so it's can't be reach by user. Have you had similar problem with your apps and know how to fix this ?
I wil be really grateful for any help
Link to image when I put screenshot with my problem
The picture contains four screenshots:
1) The top of the page
2) The bottom of the page
3) Focus on the first textbox
4) The area on the page which can be reached when focus is set to the first TextBox
The last one picture present the are which can be rached when focus is set to the first textbox. As you can see I can't get to the textboxes below Field 7 when keybord is shown.
What I need is the ability to scroll and to reach all elements when the keybord is shown.
Do you know how to resolve my poblem
It's my xaml code:
<phone:PhoneApplicationPage
x:Class="PhoneApp6.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"
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-->
<ScrollViewer Grid.Row="1" Height="600" Margin="12 0">
<StackPanel>
<StackPanel>
<TextBlock Text="Name 1" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 2" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 3" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 4" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 5" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 6" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 7" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 8" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 9" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 10" />
<TextBox />
</StackPanel>
<Button>Submit</Button>
</StackPanel>
</ScrollViewer>
</Grid>
</phone:PhoneApplicationPage>
This is a known issue and is caused by the SIP changing the viewable area of the screen. The link David Gorden mentioned does help, but you actually need to change the height of the scrollviewer to achieve perfect results. To make things a little more complex WP does not trigger an event for when the SIP is visible! So you need to hook into the GotFocus/LostFocus events.
Edit your scrollviewer so it looks something like this:
<ScrollViewer x:Name="_scrollViewer"
VerticalAlignment="Top"
GotFocus="UIElement_OnGotFocus"
LostFocus="UIElement_OnLostFocus"
... bla bla
Now add the following in the codebehind:
private bool _isHdDevice;
private int _sipHeight;
private double _origHeight;
// Constructor
public MainPage()
{
InitializeComponent();
// todo - cater for landscape mode or sip scopenames that require extra space (predictive text and cut&paste icon)
var deviceWidth = this.ActualWidth;
_isHdDevice = (deviceWidth > 500);
_sipHeight = _isHdDevice ? 540 : 375;
_origHeight = _scrollViewer.Height;
}
private void UIElement_OnGotFocus(object sender, RoutedEventArgs e)
{
double height = this.ActualHeight - _sipHeight - TitlePanel.ActualHeight;
_scrollViewer.Height = height;
// the following lines are crucial otherwise a black band could appear above the SIP
App.Current.RootVisual.RenderTransform = new CompositeTransform();
this.UpdateLayout();
}
private void UIElement_OnLostFocus(object sender, RoutedEventArgs e)
{
_scrollViewer.Height = _origHeight;
}
This is basically resizing the scroll area when the sip (keyboard) is in view. You will need to add more code to cater for things like screen rotation, scopename associated to the textbox, and cut&paste icon if in view. But this will get you going and does the difficult bit.
Please mark as answered if it helped fix the issue.
If I understand this correctly, I was having a similar problem in my own app with an inability to scroll downward to the lowest texboxes while the keyboard is visible. Since I'm not all that clever, I solved it in the following way: a spacer that appears when the keyboard is up and disappears when it's not.
The textbox items for input in my scrollviewer are all in wrappanels, to keep things tidy. Below the last wrap panel, I added another, empty wrap panel, named "spacer" with a height of 120. It is set to visibility.collapsed by default.
As part of the gotfocus event handler for each of the textboxes in the wrap panel, I set spacer to visible. That allows for scrolling all the way to the last wrappanel/textboxes in my scroll viewer while the keyboard is up.
As a part of my lostfocus event handler for each of the textboxes, spacer's visibility is set back to "collapsed." That way, when there's no keyboard up, the scrollviewer doesn't have a big, funky, empty space at the bottom.
This may not be so elegant, but it's easy and works pretty well for me. I have not yet encountered any problems with it, though that doesn't mean there may not be something I've missed.

How to remove the border in Coding4Fun MessagePrompt

I followed this example to display my usercontrol inside Coding4Fun MessagePrompt.
http://windowsphonegeek.com/articles/Creating-a-Windows-Phone-7-Trial-Application-Adding-Buy-Now-Functionality
When the Home icon at the bottom of the page is clicked I open MessagePromt which has my UserControl with two buttons as shown in image below.
But for some reason there appears this light white border, I am unable to determine from where it is coming.
Note: I have set border Transparent and 0 thickness for my usercontorl and all controls inside it.
I just want to show the blue panel and no white border and it's width is 300 as what it is seen.
Does any one has any idea?
I got help from "Eric Fleck - Microsoft" on apphub forums. Here's his solution:
<phone:PhoneApplicationPage
...
xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls">
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="MsgPropmtNoBorder" TargetType="c4f:MessagePrompt">
<Grid VerticalAlignment="Stretch">
<Rectangle Fill="{StaticResource TransparentBrush}" />
<Border VerticalAlignment="Top"
Margin="10"
Background="{TemplateBinding Background}"
BorderThickness="0"
BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Margin="10">
<TextBlock
Text="{TemplateBinding Title}"
Margin="0,-10,-25,10"
FontSize="30"
TextWrapping="Wrap" FontFamily="Segoe WP Light" />
<ContentPresenter Content="{TemplateBinding Body}" />
<StackPanel
Margin="0,10,0,0"
Name="actionButtonArea"
Orientation="Horizontal"
HorizontalAlignment="Center" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
MessagePrompt prompt = new MessagePrompt();
prompt.Body = new WPUC();
prompt.ActionPopUpButtons.Clear();
prompt.Overlay = new SolidColorBrush(Color.FromArgb(155, 41, 41, 41));
prompt.Template = (ControlTemplate)this.Resources["MsgPropmtNoBorder"];
prompt.Show();
Here's the resultant popup:
I played a bit with the MessagePrompt control, it couldn't found any way to disable or hide the border. It's a shadow kind of effect in MessagePrompt control to provide a popup like appearance.
However, Eventhough you cannot remove it, you can reduce it's effect by setting the Width property of the MessagePrompt equal to your actual blue UserControl ( 300 in this case).

TextBlock Text being truncated after rotating 90 degrees

I have a TextBlock that I want to display vertically in a user control that is 30px wide. The TextBlock control has been rotated 90° using a RenderTransform.
The rotation seems to occur fine when I combine it with a 30px translation but the actual content of the TextBlock is truncated at what appears to be 30px.
It seems like the Text is being rendered at the 30px width of the parent and then transformed.
<UserControl x:Class="Xyz.Controls.FooControl"
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="300" d:DesignWidth="30">
<Grid x:Name="LayoutRoot">
<Grid Name="barGrid" Background="#BFFFFFFF">
<Ellipse Width="30" Height="30" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Top" />
<TextBlock Name="barText" Text="88.8°"
Width="50"
Height="30"
Foreground="#FF3535C4">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90" TranslateX="30"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Grid>
</UserControl>
In this screenshot from Visual Studio the expected text is only showing 29px.
The same issue appears in Expression Blend and the Emulator.
I've figured out one way to get the intended layout but it seems like a bit of a hack.
By setting a negative left margin on the TextBlock (-20px) equal to the difference of the TextBox width (50px) and the parents width (30px) the full text is displayed vertically.
E.g.
<TextBlock Name="barText" Text="88.8°"
Width="50"
Height="30"
Foreground="#FF3535C4"
Margin="0,0,-20,0">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90" TranslateX="30"/>
</TextBlock.RenderTransform>
</TextBlock>

Increase touchable target area of a small image?

In a listbox I have a list of titles with an edit icon next to each, how do I increase the touchable area so that even if the user touches part of the title, it actually triggers the image event?
I assume I need to wrap the image in another element but cannot work out what that needs to be.
I tried wrapping the image in a button and add padding to the button but then it pushed the UI elements around, I do not want to affect the presentation, just the none-visible touchable area.
Wrap it in a button - you're totally in the right ball-park. But you need to edit the control template of the button and reduce down all the standard padding and margin, borders etc. so its just a raw touchable region.
You can then wrap anything in this button and apply your template/style to make anything interactive.
Luke
You could try wrapping in a Panel or Grid.
Or just adjust the margin and Z-Order.
Put the image in a button, set the size of the button you want & then set the Stroke property to "No brush" on the button to remove the border.
Try it:
<Border BorderBrush="Transparent"
BorderThickness="20,25,20,0"
Background="Transparent">
<Grid/>
</Border>
or use it in other variations:
<Border Background="Transparent">
<Grid Margin="20 25 20 0"/>
</Border>
full sample with button: (no background interaction when pressed at this sample)
<Button BorderBrush="Transparent"
Tag="{Binding SelectedPhoto.commentsCount}">
<Button.Template>
<ControlTemplate>
<Border BorderThickness="20,25,20,0"
BorderBrush="Transparent"
Background="Transparent">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Grid Margin="0 0 4 0"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock Text="{TemplateBinding Tag}"
Visibility="{Binding SelectedPhoto.HasComments,Converter={StaticResource BoolToVisibilityConverter}}"
Foreground="{StaticResource BlueColorBrush}"
FontSize="{StaticResource MFontSize36}" />
</Grid>
<Image Source="/Images/photo_comments_icon.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
<Image Source="/Images/photo_comments_icon_blocked.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource OppositeBoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

Resources