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>
Related
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>
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?
I am trying to add a context menu which shows menu items horizontally. My sample code:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<StackPanel Orientation="Horizontal">
<toolkit:MenuItem Tap="CallMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon1.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
<toolkit:MenuItem Tap="ChatMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon2.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
<toolkit:MenuItem Tap="OtherMenuItem_tapped">
<toolkit:MenuItem.Header>
<Image Height="50"
Stretch="Uniform"
Source="Assets/icon3.png" />
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</StackPanel>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
I am facing some problems. First of all when I tap a menu item the specific event is called but the menu remains open. As I am showing all the menu items in one line(horizontally), I am unable to fix the height and width of context menu. Is there a better way to add a horizontal context menu using icons?
I would suggest you to use the ItemsPanel property to set the layout as horizontal stack panel. And if you still face any issues then you can manually close the context menu using the IsOpen property. Hope this helps you.
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
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>