ContentDialog Windows 10 Mobile XAML - FullScreen - Padding - c#

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>

Related

C# WPF Layout problem (Difference between design and runtime)

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>

How do I create a custom ListBoxItem with C# and WPF?

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 :)

UWP Create a content dialog with one big button

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>

How do I remove the Buttons from the UWP TimePicker

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.

Button inside Usercontrol not firing properly in WPF

I have a Image buttton kind of usercontrol, which has two textblocks and an image inside button, but button is firing click only when I click on textblock or image part. just to do quick debug I have set button's cursor to Hand, strangely its showing Hand cursor only when mouse is over texblocks/Image but not on any part of the button. Here is my code
Name="Tiles" Background="Green"
d:DesignHeight="300" d:DesignWidth="300" Margin="10,10,10,10">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="booleanVisibleConverter" />
<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
<Style x:Key="ImgBtnStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ImgBtnStyle" TargetType="{x:Type Button}">
<Border Name="border"
BorderThickness="1"
Padding="0"
BorderBrush="DarkGray"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding ElementName=Tiles, Path=ResultValue}" Style="{StaticResource txtblck}" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="{Binding ElementName=Tiles, Path=TestName}" Style="{StaticResource txtblck}" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Bottom" TextAlignment="Left" Padding="5,0,0,5"/>
<Image Source="/resources/Icons/tickBlack.png" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding Path= TestDone, ElementName=Tiles, Converter={StaticResource booleanVisibleConverter}}"/>
</Grid>
</Button>
Set Grid's Background to Transparent like below :
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid Background="Transparent">
...
</Button>
I made above changes and it worked fine for me.

Categories

Resources