I'm trying to create a content dialog with only one button in the center
I've trying to change the style for the content dialog using style code but nothing changed iI Still have two button and if i use only one the button keeps on the left
Here's my code
<!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
<Style TargetType="ContentDialog">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}" >
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="XamlAutoFontFamily"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTabStop="False"
MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter
Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
HorizontalAlignment="Center" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have change the style and I have only one button call Button1Host but when i create a content dialog nothing changed I've tryed to copy that code to my content dialog xaml using <page.Resoures> but I got the same value
Hope you help me
Find the CommandSpace Grid and set the its first column width to 0.
<Grid x:Name="CommandSpace"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MinHeight="{ThemeResource ContentDialogButtonMinHeight}" />
<Border x:Name="Button2Host"
Margin="{ThemeResource ContentDialogButton2HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MinHeight="{ThemeResource ContentDialogButtonMinHeight}"
Grid.Column="1" />
</Grid>
Why don't you try something with the content template and not use the primary or secondary buttons. Have a look at the below code:
<ContentDialog x:Name="contentD">
<ContentDialog.ContentTemplate>
<DataTemplate>
<Grid Background="Pink">
<Button Content="My Lonely Button" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5"/>
</Grid>
</DataTemplate>
</ContentDialog.ContentTemplate>
</ContentDialog>
Related
I'm having trouble with design my apps on C# WPF because the design mode doesn't equal when I run the app.
If I run the app on windows 10 I get the difference like the image I attach (Button that says "CANCELAR"), but if I run on windows 2000 server it runs like design mode.
My code:
<Window x:Class="Cozinha_V2.TakeAway"
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"
xmlns:local="clr-namespace:Cozinha_V2"
mc:Ignorable="d"
Title="TakeAway" Height="320" MaxHeight="320" MinHeight="320" Width="470" MinWidth="470" MaxWidth="470" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" ShowInTaskbar="False" SizeToContent="WidthAndHeight">
<Window.Resources>
<ControlTemplate x:Key="ButtonBaseControlTemplateSemOver" TargetType="{x:Type ButtonBase}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsDefaulted" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<!--<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
</Trigger>-->
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
<Setter Property="Foreground" Value="#FF838383"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="55" />
<RowDefinition Height="*" />
<RowDefinition Height="55" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="157" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="157" />
</Grid.ColumnDefinitions>
<Button x:Name="btnHorasMais" Grid.Row="1" Grid.Column="0" Content="+" FontSize="40" MaxWidth="42" HorizontalAlignment="Right" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnHorasMais_Click"/>
<Button x:Name="btnHorasMenos" Grid.Row="3" Grid.Column="0" Content="-" FontSize="40" MinWidth="30" HorizontalAlignment="Right" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnHorasMenos_Click"/>
<Label x:Name="Horas" Grid.Row="2" Grid.Column="1" Content="00" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="70"/>
<Label x:Name="separador" Grid.Row="2" Grid.Column="2" Content=":" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="70"/>
<Label x:Name="Minutos" Grid.Row="2" Grid.Column="3" Content="00" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="70"/>
<Button x:Name="btnMinutosMais" Grid.Row="1" Grid.Column="4" Content="+" FontSize="40" MaxWidth="42" HorizontalAlignment="Left" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnMinutosMais_Click"/>
<Button x:Name="btnMinutosMenos" Grid.Row="3" Grid.Column="4" Content="-" FontSize="40" MinWidth="32" HorizontalAlignment="Left" Background="White" BorderBrush="White" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="btnMinutosMenos_Click"/>
<Button x:Name="novoPedido" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" MinHeight="105" Content="IMPRIMIR" FontSize="20" FontWeight="Bold" Margin="3" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="novoPedido_Click"/>
<Button x:Name="sair" Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="4" MinHeight="105" Content="CANCELAR" FontSize="20" FontWeight="Bold" Margin="3" Template="{DynamicResource ButtonBaseControlTemplateSemOver}" Click="sair_Click" />
</Grid>
You have fixed Window width and ColumnDefinitions width. But window layout depends on OS and OS themes/settings, so window area available for content can be different.
Allow two largest columns take all remaining width by using * width setting:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
I needed to define 2 ScrollBars for one ScrollViewer UWP ScrollBar styles. Styles work but there was a problem, I lost the ability to scroll with touch. After I touch the Thumb, it is no longer attached to the mouse wheel and can only be moved with a mouse click.
<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border x:Name="Root"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="ScrollContentPresenter"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}" />
<ScrollBar
Grid.Column="1"
HorizontalAlignment="Right"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Style="{StaticResource VerticalScrollBar}"
/>
<ScrollBar
IsTabStop="False"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Grid.Row="1"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{TemplateBinding HorizontalOffset}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Style="{StaticResource HorizontalScrollBar}"
/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Who knows how to solve this problem?
I changed the style a little and the scrolling worked
<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border x:Name="Root"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="ScrollContentPresenter"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}" />
<ScrollBar x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Style="{StaticResource VerticalScrollBar}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Style="{StaticResource HorizontalScrollBar}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It is worth noting that for the Track you need to specify the name x: Name = "PART_Track", so that the custom Thumb would work on pressing
<Style x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="False">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="1"/>
<Track x:Name="PART_Track"
IsDirectionReversed="False"
IsEnabled="{TemplateBinding IsMouseOver}"
Grid.Column="1">
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbHorizontal}"
Height="{TemplateBinding Height}"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I hope this helped not only me)
I am learning C# and WPF. Now I want to make a customized ListBoxItem. With my own style. Containing some TextBlocks and a Image.
How do I achieve that?
I've tried to derive a Class from ListBoxItem but that dosn't work.
I also created a Style with ControleTemplate but I can't figure out how I can change the Text property of the TextBlocks inside the Template.
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="White"/>
<Setter Property="Height" Value="75"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="test" TargetType="{x:Type ListViewItem}">
<Grid Background="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.RowSpan="3" VerticalAlignment="Center" HorizontalAlignment="Center" Width="80" Height="{TemplateBinding Height}">
<StackPanel.Background>
<ImageBrush ImageSource="media/pictures/noImage.png"/>
</StackPanel.Background>
</StackPanel>
<TextBlock x:Name="lbl_Heading" Text="HowToAccessThisProperty" Grid.Column="1" Grid.Row="0" FontSize="14" FontWeight="Bold" VerticalAlignment="Center"/>
<TextBlock Name="lbl_Description" Text="HowToAccessThisProperty" Grid.Column="1" Grid.Row="1" FontSize="12" VerticalAlignment="Center"/>
<TextBlock Name="lbl_FurtherInfo" Text="HowToAccessThisProperty" Grid.Column="1" Grid.Row="2" FontSize="10" VerticalAlignment="Center"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you :)
I need to remove the bottom Buttons from the TimePicker-Controll Flyout.
This style does it, but I can't see where the magic happens:
<Style x:Key="TimePickerStyle1" TargetType="TimePicker">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker">
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0">
<Grid Margin="{TemplateBinding Padding}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FlowDirection="{TemplateBinding FlowDirection}"
FontWeight="{ThemeResource TimePickerHeaderThemeFontWeight}"
Foreground="{ThemeResource TimePickerHeaderForegroundThemeBrush}" />
<StackPanel Grid.Row="1"
Margin="0,0,47,0"
Background="#FFFBFBFB"
Orientation="Horizontal">
<Border x:Name="FirstPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="HourPicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="4,0,0,0" />
</Border>
<Border x:Name="SecondPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="MinutePicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="4,0,0,0" />
</Border>
<Border x:Name="ThirdPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="PeriodPicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="0,0,0,0" />
</Border>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I would like to use this style, but the formating is messed up, so I'd like to start from a clean copy of the original template
EDIT:
My Visual-Live-Tree
From the Live Visual Tree of Visual Studio, we can find that TimePicker use TimePickerFlyoutPresenter to show it in PopupRoot.
So we can edit its Style and Template to remove the Buttons. To find its Style, we can search TimePickerFlyoutPresenter in generic.xaml.
generic.xaml is available in the (Program Files)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic
folder from a Windows SDK installation.
We can just comment out the Buttons in its template like following:
<Style TargetType="TimePickerFlyoutPresenter">
<Setter Property="Width" Value="242" />
<Setter Property="MinWidth" Value="242" />
<Setter Property="MaxHeight" Value="398" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePickerFlyoutPresenter">
<Border x:Name="Background"
MaxHeight="398"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="ContentPanel">
<!--<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="45" />
</Grid.RowDefinitions>-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="FirstPickerHostColumn" Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition x:Name="SecondPickerHostColumn" Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition x:Name="ThirdPickerHostColumn" Width="*" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="HighlightRect"
Grid.Column="0"
Grid.ColumnSpan="5"
Height="44"
VerticalAlignment="Center"
Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
<Border x:Name="FirstPickerHost" Grid.Column="0" />
<Rectangle x:Name="FirstPickerSpacing"
Grid.Column="1"
Width="2"
HorizontalAlignment="Center"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Border x:Name="SecondPickerHost" Grid.Column="2" />
<Rectangle x:Name="SecondPickerSpacing"
Grid.Column="3"
Width="2"
HorizontalAlignment="Center"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Border x:Name="ThirdPickerHost" Grid.Column="4" />
</Grid>
<!--<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2"
Height="2"
VerticalAlignment="Top"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Button x:Name="AcceptButton"
Grid.Column="0"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content=""
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
<Button x:Name="DismissButton"
Grid.Column="1"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content=""
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
</Grid>-->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But after this, we can only use Enter to confirm the selected time. And customize this control is not easy as we don't know how this is implemented.
To achieve what you want, I'd like to create a new custom control. Here is a blog about DatePicker calendar custom control for WinRT Xaml. Although this is a DatePicker control, but TimePicker is similar. You can refer to its source code on Codeplex to implement your TimePicker.
I put an ContentDialog in my project to use for Login Popup on Windows 10.
When I run this project on mobile, ContentDialog not shown in full screen and have a minimal padding around this element.On keyboard is visible (on focus element textbox for example) exist margin between keyboard and content dialog
Have any solution to how this on FullScreen? I set the property "FullSizeDesired" true, mas the problem is the same?
Someone help to remove this: - Padding, - Full Screen
My code are:
<ContentDialog
x:Class="ExampleApp.SignInContentDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ExampleApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="SIGN IN">
<Grid x:Name="GridMobile" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegister"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
</Grid>
The margin/space have in button of page is reserved for the "PrimaryButton" and "SecondaryButton" I think
but I need more buttons and this margin/space is not appropriated for me. I want to remove this.
Thanks.
The reason that you see the gaps in between is not because of any specific Padding values but because in ContentDialog's default style, the height and width are set to Auto which means your content will only be given the size it needs to.
So make the content stretch to fit its parent, you just need to override the default style by applying your own default style of the local:SignInContentDialog and put it inside your App.xaml.
<Style TargetType="local:SignInContentDialog">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:SignInContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- COMMENT OUT THESE FOLLOWING LINES -->
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>-->
<Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" MaxWidth="{TemplateBinding MaxWidth}" MaxHeight="{TemplateBinding MaxHeight}" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}">
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title" Margin="{ThemeResource ContentDialogTitleMargin}" Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}" FontSize="20" FontFamily="Segoe UI" FontWeight="Normal" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Left" VerticalAlignment="Top" IsTabStop="False" MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}" MaxLines="2" TextWrapping="Wrap" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" FontSize="{ThemeResource ControlContentThemeFontSize}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" Margin="{ThemeResource ContentDialogContentMargin}" Foreground="{TemplateBinding Foreground}" Grid.Row="1" TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host" Margin="{ThemeResource ContentDialogButton1HostMargin}" MinWidth="{ThemeResource ContentDialogButtonMinWidth}" MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}" Height="{ThemeResource ContentDialogButtonHeight}" HorizontalAlignment="Stretch" />
<Border x:Name="Button2Host" Margin="{ThemeResource ContentDialogButton2HostMargin}" MinWidth="{ThemeResource ContentDialogButtonMinWidth}" MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}" Height="{ThemeResource ContentDialogButtonHeight}" Grid.Column="1" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>