Управление стилем TimePicker

Question

Я пытаюсь стилизовать элемент управления TimePicker, который появляется в форме, чтобы цвет текста изменялся в соответствии со стилем телефона с прозрачным фоном.Для обычного текста я просто использую:

Style="{StaticResource PhoneTextNormalStyle}"

Однако это не сработает для TimePicker, и я получаю сообщение об ошибке при попытке построить проект.

Извините за серьезныеотсутствие деталей прямо сейчас, у меня сейчас нет доступа к моему блоку разработки.Когда я вернусь домой, я выложу скриншот элемента управления и ошибки.

Answer 1

Самый простой способ сделать это - использовать Expression Blend. Откройте там проект, щелкните правой кнопкой мыши элемент управления и выберите «Редактировать стиль» -> «Редактировать копию». Это поместит элемент стиля в раздел page.resources, который выглядит как следующий фрагмент

<Style x:Key="TimePickerStyle1" TargetType="toolkit:TimePicker">
     <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
     <Setter Property="BorderThickness" Value="0"/>
     <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
     <Setter Property="HorizontalContentAlignment" Value="Left"/>
     <Setter Property="PickerPageUri" Value="/Microsoft.Phone.Controls.Toolkit;component/DateTimePickers/TimePickerPage.xaml"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="toolkit:TimePicker">
                 <StackPanel>
                    <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource PhoneSubtleBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,12,-4"/>
                    <Button x:Name="DateTimeButton" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Content="{TemplateBinding ValueString}" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Height="72"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

и ваше контрольное определение будет выглядеть так:

<toolkit:TimePicker Name="TimePickerInstance" Style="{StaticResource TimePickerStyle1}"></toolkit:TimePicker>

Конечно, вы можете сами вставить этот фрагмент и ссылаться на него таким же образом в элементе управления. Все будет работать одинаково - Expression Blend просто делает процесс его выполнения намного проще.

Вы должны иметь возможность манипулировать этим по мере необходимости, возможно, изменив 2-ю и 4-ю строки на

<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>

Надеюсь, это поможет.