GridView Control (Windows 8) incorrectly rendered - xaml

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

Related

Binding current Item for Carousel of Content Views (held in Observable Collection)

I'm new to this community / Xamarin, and I've been stuck on this for a while so I need to reach out for help now.
I have a CarouselView of ContentViews and one of the view pages need to be validated so when the field is empty, I can revert back the correct carousel page using the Current Item binding BUT - although I am correctly retrieving the current item and the content view, the UI/binding isn't updating.
ContentViews is the ObservableCollection.
<Label Text="{Binding Source={x:Reference carouselView}, Path=CurrentItem,
StringFormat='Current item: {0}', FallbackValue='Current item:'}"/>
<Label Text="{Binding Source={x:Reference carouselView}, Path=Position,
StringFormat='Position: {0}'}"/>
<CarouselView
x:Name="carouselView"
IndicatorView="indicatorView"
ItemsSource="{Binding ContentViews}"
CurrentItem="{Binding CurrentItem}"
Position="{Binding Position}"
CurrentItemChanged="OnCurrentItemChanged"
PositionChanged="OnPositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding .}" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Do you have INotifyPropertyChanged implemented in you Binding Source?
check this , also check that the CarouselView Binding source is your desired class.

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 do I set text wrapping property for a content of a button in Windows universal platform?

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>

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?

Microsoft Surface - Flip & Scatter View Items

I'm currently trying to get flip to work with scatterview items, and I'm having some trouble conceptually with it, using a plugin called Thriple (http://thriple.codeplex.com/).
Essentially, a 2 sided thriple control looks like this:
<thriple:ContentControl3D
xmlns:thriple="http://thriple.codeplex.com/"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="2"
MaxWidth="200" MaxHeight="200"
>
<thriple:ContentControl3D.Content>
<Button
Content="Front Side"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</thriple:ContentControl3D.Content>
<thriple:ContentControl3D.BackContent>
<Button
Content="Back Side"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</thriple:ContentControl3D.BackContent>
</thriple:ContentControl3D>
What I'm struggling to grasp is if I should be making 2 separate ScatterView templates to bind to the data I want, and then each one would be the "front" and "back" of a scatterview item OR should i make 2 separate ScatterView items which are bound to the data I want, which is then bound to the "back" and "front" of a main ScatterView item?
If there is a better way of using doing flip animations with ScatterViewItem's, that'd be cool too!
Thanks!
I would create two separate templates for the data. To the user, it is still the same scatterviewitem (with two sides) so having them as two separate items makes little sense. You can specify which templates to use for front vs back in the properties of the ContentControl3D class. (They are of type DataTemplate)
Code-wise, it'd look something like this:
<thriple:ContentControl3D
xmlns:thriple="http://thriple.codeplex.com/"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="2"
MaxWidth="200" MaxHeight="200"
Content="{Binding MyData}"
BackContent="{Binding MyData}"
ContentTemplate="{StaticResource MyFrontTemplate}"
BackContentTemplate="{StaticResource MyBackTemplate}"
/>
You could also just specify the content directly in the declaration of the control (like you have your buttons above) if that makes more sense for you. That saves you from having to create data templates for the content:
<thriple:ContentControl3D
xmlns:thriple="http://thriple.codeplex.com/"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="2"
MaxWidth="200" MaxHeight="200"
>
<thriple:ContentControl3D.Content>
<Grid>
<TextBlock Text="I'm the front" />
<TextBlock Text="{Binding SomeDataProperty}" />
<Button
Content="Flip"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</Grid>
<thriple:ContentControl3D.BackContent>
<Grid>
<TextBlock Text="I'm the back" />
<TextBlock Text="{Binding SomeOtherDataProperty}" />
<Button
Content="Flip"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</Grid>
</thriple:ContentControl3D.BackContent>
</thriple:ContentControl3D>