Gestaltung des TimePicker-Steuerelements

Question

Ich versuche, das TimePicker-Steuerelement, das auf dem Formular angezeigt wird, so zu gestalten, dass die Textfarbe entsprechend dem Stil des Telefons mit einem transparenten Hintergrund ändert. Für normalen Text, ich einfach verwenden:

Style="{StaticResource PhoneTextNormalStyle}"

Dies funktioniert jedoch nicht für den TimePicker und ich erhalte einen Fehler, wenn ich versuche, das Projekt zu erstellen.

Tut mir leid, dass ich im Moment so wenig Details habe, ich habe im Moment keinen Zugang zu meiner Entwicklungsbox. Wenn ich nach Hause komme, werde ich einen Screenshot des Steuerelements und den Fehler posten.

Answer 1

Der einfachste Weg, dies zu tun, wäre in Expression Blend. Öffnen Sie das Projekt dort, klicken Sie mit der rechten Maustaste auf das Steuerelement und wählen Sie "Stil bearbeiten" -> "Eine Kopie bearbeiten". Dadurch wird ein Stilelement in den Abschnitt page.resources eingefügt, das wie der folgende Ausschnitt aussieht

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

und Ihre Kontrolldefinition wird wie folgt aussehen:

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

Natürlich können Sie dieses Snippet auch selbst einfügen und im Steuerelement auf dieselbe Weise referenzieren. Es wird alles auf die gleiche Weise funktionieren - Expression Blend macht nur den Prozess der es viel einfacher zu tun.

Sie sollten in der Lage sein, dies von dort aus nach Bedarf zu ändern, wobei Sie wahrscheinlich die 2. und 4.

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

Ich hoffe, das hilft.