How do I set text wrapping property for a content of a button in Windows universal platform? - xaml

I could not find in Windows.UI.Xaml.Controls classes a property for a button to make its text move to the next line. For example for a TextBox I can do TextWrapping="Wrap" but what should we do for a button?

Try this
<Button Width="50" Height="50">
<TextBlock Text="Lengthy Data...." TextWrapping="Wrap" />
</Button>

Related

UWPCommunityToolkit DropShadowPanel on Button

I'm trying to apply a shadow effect on a button on a UWP application.
I'm using the UWPCommunityToolkit tool and the control DropShadowPanel. Here an example :
http://www.uwpcommunitytoolkit.com/en/master/controls/DropShadowPanel/
So my code for apply on a button control :
<controls:DropShadowPanel BlurRadius="{Binding BlurRadius.Value, Mode=OneWay}"
ShadowOpacity="{Binding Opacity.Value, Mode=OneWay}"
OffsetX="{Binding OffsetX.Value, Mode=OneWay}"
OffsetY="{Binding OffsetY.Value, Mode=OneWay}"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Button Content="My button" />
</controls:DropShadowPanel>
But the result is :
The shadow cover all my button control.
According to the doc Button control doesn't directy inherit from FrameworkElement, that is maybe a reason.
Regards
Hum problem solved by using custom values :
<controls:DropShadowPanel BlurRadius="4.0"
ShadowOpacity="0.70"
OffsetX="5.0"
OffsetY="5.0"
Color="Black"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Button Content="My button" Background="Aqua" />
</controls:DropShadowPanel>

How to optimize navigation and user-experience into a login form?

I have developed an Universal app that uses a login form, that allowing users to connect or to create an account.
It is a simple page that looks like this:
This XAML code is also very simple:
<ScrollViewer>
<StackPanel>
<TextBlock x:Uid="loginRegisterTextblockMessage"
Style="{StaticResource TitleTextBlockStyle}"
Text="Remplissez vos informations d'inscription" />
<TextBox x:Uid="loginRegisterTextboxOrganizationURL"
Header="Organisation ou URL"
IsSpellCheckEnabled="False"
IsHitTestVisible="True"
IsTextPredictionEnabled="False"
Text="{Binding OrganizationURL, Mode=TwoWay}" />
<TextBox x:Uid="loginRegisterTextboxLastName"
Header="Nom"
Text="{Binding LastName, Mode=TwoWay}" />
<TextBox x:Uid="loginRegisterTextboxFirstName"
Header="Prénom"
Text="{Binding FirstName, Mode=TwoWay}" />
<TextBox x:Uid="loginRegisterTextboxEmail"
Header="Email"
InputScope="EmailSmtpAddress"
Text="{Binding Email, Mode=TwoWay}"/>
<PasswordBox x:Uid="loginRegisterPasswordboxPassword"
Header="Mot de passe"
Password="{Binding Password, Mode=TwoWay}" />
<PasswordBox x:Uid="loginRegisterPasswordboxConfirmPassword"
Header="Confirmez le mot de passe"
Password="{Binding PasswordConfirmation, Mode=TwoWay}" />
<CheckBox x:Uid="loginRegisterCheckboxTermsOfUse"
IsChecked="{Binding TermsOfUse, Mode=TwoWay}" >
<TextBlock Style="{StaticResource BaseTextBlockStyle}">
<Run x:Uid="loginRegisterTextblockTermsOfUse1"
Text="J'accepte les " />
<Underline>
<Hyperlink x:Uid="loginRegisterHyperlinkTermsOfUse"
NavigateUri="http://termsofuse.html" >
<Run x:Uid="loginRegisterTextblockTermsOfUse2"
Text="conditions générales d'utilisation" />
</Hyperlink>
</Underline>
</TextBlock>
</CheckBox>
<Button x:Uid="loginRegisterButtonRegister"
Content="S'inscrire"
Command="{Binding RegisterCommand}" />
</StackPanel>
</ScrollViewer>
But I meet a "problem" for navigating between each fields of this page:
=> The user must click outside of a TextBlock to hide the keyboard and select the next field: this is not very user-friendly
I took a look at a similar "system" form: the page used to create an account to access to the Windows Store.
The page looks very similar to my own page:
But it is there possible to activate the next field by clicking on its header:
The focus moved on the field and the keyboard is also automatically displayed:
If I click on the the next header "Nom d'utilisateur", I can see that the next field is now "Domaine", by moving automatically into the displayed content:
=> Is there an easy way to reproduce this comportment? Is it based on the "Header" of the "TextBox", or by using seperated "TextBlock" to show the header?
I always looking for a good solution but I didn't find it.
I've added events in the XAML for the TextBox and PasswordBox on GetFocus and KeyDown.
In the Code-Behind, I can now manage the "Enter" Key, that gives the focus to the next TextBox:
private void RegisterTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
TextBox currentTextBox = (TextBox)sender;
if (currentTextBox != null)
{
if (e.Key == Windows.System.VirtualKey.Enter)
{
FocusManager.TryMoveFocus(FocusNavigationDirection.Next);
}
}
}
But I haven't yet managed the ScrollViewer autoscroll like I hope.
I tried to inspire me from this link, but to no avail:
Keyboard-Overlaps-Textbox
=> Is there really a way to reproduce the autoscroll that is used on the registration form for the Windows Store?

Button with image and stackpanel with text misses the mouse click event in Windows Store App?

In my Windows Store App I use a button which has a star shape with some text. I use the following XAML code for the button:
<Button Name="goButton" BorderThickness="0" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-91,33,0" FontSize="25" IsEnabled="True" Click="goButton_Click" >
<Grid Width="227" Height="222">
<Image Source="Assets/redstar.png" />
<StackPanel Orientation="Vertical" Margin="77">
<TextBlock TextAlignment="Center" Text="Tag"></TextBlock>
<TextBlock TextAlignment="Center" Text="ist um!"></TextBlock>
</StackPanel>
</Grid>
</Button>
This is what is the button looks like:
Unfortunately it often happens that clicks in the area of the star are not recognized, e.g. the event handler is not startet. I suppose that it has something to do with the image, for it works fine if I remove the image from the grid. But this doesn't solve my problem.
Any suggestions?
Don't see anything wrong off the top. You could try a couple of things:
Instead of click, try the Tapped event for the button.
Try tapped on the container Grid.
Get rid of the Grid & put all button content in a StackPanel & then try tapped/clicked on it.
Go with patterns like MVVM & associate your button with a Command.
Hope these help!

GridView Control (Windows 8) incorrectly rendered

Here's the code for the GridView Control that I'm using (made on BlankPage App):
<GridView HorizontalAlignment="Left" x:Name="gridView1" Margin="227,220,0,53" Width="1087">
<Button x:Name="XboxButton" Margin="10,10,10,10" Style="{StaticResource XboxButton}" Height="200" Click="SnappedXboxButton_Click_1"/>
<Button x:Name="PS3Button" Margin="10,10,10,10" Style="{StaticResource PS3Button}" Click="SnappedPS3Button_Click_1" />
<Button x:Name="PCButton" Margin="10,10,10,10" Style="{StaticResource PCButton}" Click="SnappedPCButton_Click_1" />
<Button x:Name="DSButton" Margin="10,10,10,10" Style="{StaticResource DSButton}" Click="SnappedDSButton_Click_1" />
<Button x:Name="PSPButton" Margin="10,10,10,10" Style="{StaticResource PSPButton}" Click="SnappedPSPButton_Click_1" />
<Button x:Name="ContactButton1" Margin="10,10,10,10" Style="{StaticResource ContactButton}" Click="SnappedContactButton_Click_1" />
<Button x:Name="PrivacyButton" Margin="10,10,10,10" Style="{StaticResource DisclaimerButton}" Click="SnappedPrivacyButton_Click_1"/>
</GridView>
The problem is when the app first loads it shows the GridView is shown like this:
(Please go here, since, I'm new, I'm not allowed to post images)
http://social.msdn.microsoft.com/Forums/getfile/189014
But when I click any item and GO BACK to the first page the render is fine as shown in this image:
http://social.msdn.microsoft.com/Forums/getfile/189015
Improve tour markup.
1. In the GridView define a style resource for buttons, or in app resources create a base style and then use it in each button style using BasedOn={StaticResource binding notation
2. Set the margin,width,height , as I see all buttons have same property values
3. Id you don't want GridView set width or height values automaticly, ensure you set the values in the styles

XAML tostring in ContentControl

I am new to the XAML world and I'm fumbling my way through a lot of tutorials. One thing i'm stuck on is calling the .tostring on an object.
Here is mysetup
I have a listbox that is bound to a list of objects
I have a contentControl bound to the same list that displays the selected item from the listbox.
My ContentControl is as follows:
<ContentControl Grid.Row="1" Margin="0,3,5,204" Name="Detail"
Content="{Binding Source={StaticResource listingDataView}}"
ContentTemplate="{StaticResource myContentTemplate}"
HorizontalAlignment="Right" Width="231"/>
in myContentTemplate I have:
<DataTemplate x:Key="myContentTemplate">
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
<!-- want to call .tostring here-->
</StackPanel>
</DataTemplate>
In the template I'd like to call .tostring on the object that is currently selected but i cant figure out how to do that?
thanks
Steph
well looks like i asked this too soon. I found the answer in another question
How to reference current object in XAML
Quoting the answer from that thread:
According to the Data Binding
Overview, you can use the "/" to
indicate the current item. You can
then navigate up and down the tree as
needs be using the following type
syntaxes:
Button Content="{Binding }" />
Button Content="{Binding Path=/}" />
Button Content="{Binding
Path=/Description}" />
Hope this helps someone else :)