TimePickerThemeMinWidth doesn't update view

Question

HI,

I want change the width of TimePicker.
To do that I add this line in the App.xaml:

<x:Double x:Key="TimePickerThemeMinWidth">140</x:Double>

Like this:

<Application
    x:Class="unoappTimePickerWidth.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:unoappTimePickerWidth">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Place resources here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- During the debugin comment and uncoment the next line -->
            <x:Double x:Key="TimePickerThemeMinWidth">140</x:Double>
        </ResourceDictionary>
    </Application.Resources>  
</Application>

But it doesn't work.
To do that it works, during the debuging I have to comment and uncoment that line.

And this is the MainPage.xaml:

<Page
    x:Class="unoappTimePickerWidth.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:unoappTimePickerWidth"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TimePicker HorizontalAlignment="Center" ClockIdentifier="24HourClock"/>
    </Grid>
</Page>

Write de basic program with TimePiker in MainPage.xaml and add the <x:Double x:Key="TimePickerThemeMinWidth">140</x:Double> to App.xaml.
Run in debug mode and comment and uncomment this line <x:Double x:Key="TimePickerThemeMinWidth">140</x:Double> in App.xaml to see the TimePicker width change.

I'm working in Windows 11.

How can I change the TimePicker width?

Thanks,
BullT

Answer 1

Hello,
Welcome to Microsoft Q&A!

Run in debug mode and comment and uncomment this line in App.xaml to see the TimePicker width change.

The problem is TimePickerThemeMinWidth is StaticResource, it doesn't allow dynamic change. for updating Picker's Width, you could edit default style of TimePicker , find FlyoutButton and delete this line MinWidth="{StaticResource TimePickerThemeMinWidth}". Then set Width property as normal.

Style

<Button  
    x:Name="FlyoutButton"  
    Grid.Row="1"  
    MaxWidth="{StaticResource TimePickerThemeMaxWidth}"  
    HorizontalAlignment="Stretch"  
    VerticalAlignment="Top"  
    HorizontalContentAlignment="Stretch"  
    Background="{TemplateBinding Background}"  
    Foreground="{TemplateBinding Foreground}"  
    IsEnabled="{TemplateBinding IsEnabled}"  
    Style="{StaticResource TimePickerFlyoutButtonStyle}"  
    UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}">  

Usage

<TimePicker  
    Width="150"  
    HorizontalAlignment="Center"  
    ClockIdentifier="24HourClock" />  

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.