none
ComboBox RRS feed

  • Frage

  • Hallo,

    es geht einfach nur um eine ComboBox in einer Windows Store App. Der Hintergrund sollte Schwarz sein und der Vordergrund weiß. Hatte das versucht aber der Pfeil zum Öffnen der Liste blieb schwarz. Eine Nachfrage in der englischsprachigen Gruppe brachte das Ergebnis dass das Default Control Template der Combo Box zu überschreiben sei.

    https://social.msdn.microsoft.com/Forums/en-US/15a3381e-8eef-44ef-b482-81c0e32f6ca5/combobox-foreground-the-arrow?forum=winappswithcsharp

    Das ist unten dann zu sehen unter <ComboBox.Resources> Der Pfeil ist nun ebenfalls weiß.

    Aber das Verhalten von der ComboBox? Es ist meine erste in WPF... Die Liste ist nicht unter der TextBox sondern überlagert sie zentriert? Sobald ich mit der Maus draufgehe wird alles weiss und Text und der Pfeil zum Öffnen verschwinden... Wollte doch nur die Farbe von Vorder- und Hintergrund ändern. Bisher ohne rechtes Ergebnis und warum ist die Liste nicht unter der TextBox?

    Im FileOpen Picker ist eine Art Ordner Combo Box. Dort ist der Hintergrund und Vordergrund dann so wie ich es haben möchte und die Liste schön unter der TextBox...

    Es kann doch nicht sein dass ich nur für einen weißen Pfeil das Ganze da unten im Code haben muss. Versucht es teilweise zu löschen habe ich nicht.

           <ComboBox x:Name="ComboBox1" 
                      ItemsSource="{Binding Obj_List}" 
                      DisplayMemberPath="FileName" Margin="80, 0, 0, 0"
                      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                      Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
                      IsDropDownOpen="False" 
                      HorizontalAlignment="Left" VerticalAlignment="Top" 
                      BorderThickness="0">
              
              <ComboBox.Resources>
                <Style x:Key="ComboBoxStyle1" TargetType="ComboBox">
                  <Setter Property="Padding" Value="8,0"/>
                  <Setter Property="MinWidth" Value="{ThemeResource ComboBoxThemeMinWidth}"/>
                  <Setter Property="Foreground" Value="{ThemeResource ComboBoxForegroundThemeBrush}"/>
                  <Setter Property="Background" Value="{ThemeResource ComboBoxBackgroundThemeBrush}"/>
                  <Setter Property="BorderBrush" Value="{ThemeResource ComboBoxBorderThemeBrush}"/>
                  <Setter Property="BorderThickness" Value="{ThemeResource ComboBoxBorderThemeThickness}"/>
                  <Setter Property="TabNavigation" Value="Once"/>
                  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
                  <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
                  <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
                  <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
                  <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                  <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                  <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                  <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                  <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                  <Setter Property="ItemsPanel">
                    <Setter.Value>
                      <ItemsPanelTemplate>
                        <CarouselPanel/>
                      </ItemsPanelTemplate>
                    </Setter.Value>
                  </Setter>
                  <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate TargetType="ComboBox">
                        <Grid>
                          <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="32"/>
                          </Grid.ColumnDefinitions>
                          <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                          </Grid.RowDefinitions>
                          <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                              <VisualState x:Name="Normal"/>
                              <VisualState x:Name="PointerOver">
                                <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxPointerOverBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxPointerOverBorderThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Highlight">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxSelectedPointerOverBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Pressed">
                                <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxPressedBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxPressedBorderThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxPressedForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedBackground"/>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxArrowPressedForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Disabled">
                                <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDisabledBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDisabledBorderThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDisabledForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxArrowDisabledForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                              <VisualState x:Name="Focused">
                                <Storyboard>
                                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
                                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Highlight"/>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxFocusedForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="FocusedPressed">
                                <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxPressedForegroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Highlight">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxPressedHighlightThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Unfocused"/>
                              <VisualState x:Name="PointerFocused"/>
                              <VisualState x:Name="FocusedDropDown">
                                <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PopupBorder">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                      <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DropDownStates">
                              <VisualState x:Name="Opened">
                                <Storyboard>
                                  <SplitOpenThemeAnimation ClosedTargetName="ContentPresenter" ContentTranslationOffset="0" ContentTargetName="ScrollViewer" ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Closed">
                                <Storyboard>
                                  <SplitCloseThemeAnimation ClosedTargetName="ContentPresenter" ContentTranslationOffset="40" ContentTranslationDirection="{Binding TemplateSettings.SelectedItemDirection, RelativeSource={RelativeSource Mode=TemplatedParent}}" ContentTargetName="ScrollViewer" ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                </Storyboard>
                              </VisualState>
                            </VisualStateGroup>
                          </VisualStateManager.VisualStateGroups>
                          <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource ComboBoxHeaderForegroundThemeBrush}" FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}" FlowDirection="{TemplateBinding FlowDirection}" Margin="{ThemeResource ComboBoxHeaderThemeMargin}" Visibility="Collapsed"/>
                          <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1"/>
                          <Rectangle x:Name="PressedBackground" Fill="{ThemeResource ComboBoxPressedHighlightThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0" Grid.Row="1"/>
                          <Border x:Name="HighlightBackground" BorderBrush="{ThemeResource ComboBoxFocusedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource ComboBoxFocusedBackgroundThemeBrush}" Grid.ColumnSpan="2" Opacity="0" Grid.Row="1"/>
                          <Rectangle x:Name="Highlight" Fill="{ThemeResource ComboBoxSelectedBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0" Grid.Row="1"/>
                          <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <TextBlock x:Name="PlaceholderTextBlock" Foreground="{ThemeResource ComboBoxPlaceholderTextForegroundThemeBrush}" FontWeight="{ThemeResource ComboBoxPlaceholderTextThemeFontWeight}" Text="{TemplateBinding PlaceholderText}"/>
                          </ContentPresenter>
                          <TextBlock x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" FontWeight="Bold" FontSize="{ThemeResource ComboBoxArrowThemeFontSize}" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Grid.Row="1" Text="&#xE011;" VerticalAlignment="Center"/>
                          <Popup x:Name="Popup">
                            <Border x:Name="PopupBorder" BorderBrush="{ThemeResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{ThemeResource ComboBoxPopupBorderThemeThickness}" Background="{ThemeResource ComboBoxPopupBackgroundThemeBrush}" HorizontalAlignment="Stretch">
                              <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" Foreground="{ThemeResource ComboBoxPopupForegroundThemeBrush}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" MinWidth="{ThemeResource ComboBoxPopupThemeMinWidth}" VerticalSnapPointsType="OptionalSingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalSnapPointsAlignment="Near" ZoomMode="Disabled">
                                <ItemsPresenter/>
                              </ScrollViewer>
                            </Border>
                          </Popup>
                        </Grid>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </Style>
              </ComboBox.Resources>
              <ComboBox.Style>
                <StaticResource ResourceKey="ComboBoxStyle1"/>
              </ComboBox.Style>
            </ComboBox>


    • Bearbeitet Markus222 Donnerstag, 26. März 2015 18:12
    Donnerstag, 26. März 2015 18:10

Antworten

  • Hallo Markus,

    im Style muss alles das stehen bleiben, was funktionieren soll. Wenn du die ComboBox beispielsweise nie deaktivierst (IsEnabled=false), kannst den Disabled-VisualState auch weg lassen. Der Großteil muss jedoch da bleiben. (Die weg gelassenen VisualStates lässt du dann einfach als <VisualState Name="Name"/> stehen)

    Der Style muss nicht zwingend unter ComboBox.Ressources stehen, du kannst das ganze auch in ein eigenes Ressourcenwörterbuch oder Page.Ressources auslagern. So siehst du den Code wenigstens nicht immer, sondern nur noch den Verweis auf die Ressource.

    Mit Codebehind das Verhalten zu ändern wäre sogar noch komplizierter. Denn auch da könntest du nur den Style/Template abändern.

    Die Comboboxen bei Desktopanwendungen öffnen sich nach untern, in den Apps nicht. Und auch der FileSavePicker verhält sich wie das Standard-Control. Da die ComboBox ganz unten ist, geht die Auswahlliste nach oben auf.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    • Als Antwort markiert Markus222 Donnerstag, 26. März 2015 19:49
    Donnerstag, 26. März 2015 19:41

Alle Antworten

  • Hallo,
    da du vom FileOpenPicker als Vergleich schreibst und du im Windows 8 App Forum gepostet hast, wirst du wohl keine WPF Anwendung haben.

    Das du "so viel" machen musst liegt einfach daran, das man im XAML versucht hat zu vermeiden für jede Kleinigkeit nutzlose Eigenschaften hinzuzufügen. Wer etwas das Layout ändern will, kann es über das Template tun. Das ist noch einfach gegen das komplette neu schreiben des Controls.

    Das Standardtemplate kannst du dir generieren lassen, indem du mit der rechten Maustaste im Designer auf die ComboBox klickst und Vorlage bearbeiten > Kopie bearbeiten auswählst. So kannst du dir das Standard-Template generieren lassen. Somit hast du eigentlich noch nicht ein mal wirklich viel zu tun außer etwas Code abzuändern.

    Das das Popup mittig über dem Anzeigefeld aufgeht ist das Standardverhalten. Das wirst du nur schwer ändern können.
    Und das du die Schrift und den Pfeil nicht mehr lesen kannst, wenn du mit der Maus drüber gehst, liegt daran das du einige VisualStates nicht mit abgeändert hast. Vor allem PointerOver solltest du dafür abändern. Wie es mit den anderen VisualStates aussieht, habe ich nicht weiter geprüft.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Donnerstag, 26. März 2015 18:32
  • Hallo Tom,

    das ist eine kleine Windows Store App in Visual Basic. Das mit dem Generieren des Templates habe ich gemacht. Das Generierte ist das in <ComboBox.Resources>.

    Du hast Recht, das Ändern des PointerOver Visual States mit ThemeResource ApplicationPageBackgroundThemeBrush brachte das gewünschte Verhalten. Es ist nun auch schwarz.

    Muss alles im Code stehen bleiben?  Oder nur das abgeänderte? Ich weiß es nicht. Programmiere nur eher selten und weiß nicht ob nur das abgeänderte das was überschreiben soll in MainPage.xaml in Combobox.Resources stehen bleiben muss oder das komplette wie im Beispiel.

    Kann man dass vielleicht im Visual Basic mit 2 Befehlen setzen? Muss ich mal schauen. Dann könnte man den ganzen <ComboBox.Resources> Abschnitt weglassen.

    Es ging einfach nur um Combobox Vorder- und Hintergrund Farbe.

    Das die Liste nicht unter der TextBox ist verstehe ich nicht. Bisher kannte ich ComboBoxen nur so dass die Liste darunter aufgeht. Im FileOpenPicker ist es bei der Auswahl auch so.


    • Bearbeitet Markus222 Donnerstag, 26. März 2015 19:31
    Donnerstag, 26. März 2015 19:20
  • Hallo Markus,

    im Style muss alles das stehen bleiben, was funktionieren soll. Wenn du die ComboBox beispielsweise nie deaktivierst (IsEnabled=false), kannst den Disabled-VisualState auch weg lassen. Der Großteil muss jedoch da bleiben. (Die weg gelassenen VisualStates lässt du dann einfach als <VisualState Name="Name"/> stehen)

    Der Style muss nicht zwingend unter ComboBox.Ressources stehen, du kannst das ganze auch in ein eigenes Ressourcenwörterbuch oder Page.Ressources auslagern. So siehst du den Code wenigstens nicht immer, sondern nur noch den Verweis auf die Ressource.

    Mit Codebehind das Verhalten zu ändern wäre sogar noch komplizierter. Denn auch da könntest du nur den Style/Template abändern.

    Die Comboboxen bei Desktopanwendungen öffnen sich nach untern, in den Apps nicht. Und auch der FileSavePicker verhält sich wie das Standard-Control. Da die ComboBox ganz unten ist, geht die Auswahlliste nach oben auf.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    • Als Antwort markiert Markus222 Donnerstag, 26. März 2015 19:49
    Donnerstag, 26. März 2015 19:41
  • Danke. Glaube man sollte am besten bei den Standardwerten bleiben :-)

    Bei mir ist die Combobox im mittleren Bereich des Bildschirms und die Liste öffnet sich über der TextBox in der Höhe des selektierten Eintrags. Meint: Ist der erste Eintrag der Liste selektiert geht die Liste über der TextBox nach unten auf. Beim letzen so nach oben. Ist ein mittlerer Eintrag ausgewählt zu gleichen Teilen nach oben und nach unten. Bitte entschuldige ich war etwas bestürzt. Die TextBox ist dann nicht sichtbar.

    Wenn man vorher das alte kannte ist das ein bisschen seltsam.

    Donnerstag, 26. März 2015 19:55
  • Es ist einfach anders als das aus Windows Forms.

    WPF ist anders.

    Windows Store Apps sind noch mal anders.

    Wie es aussieht ist die TextBox keine. Es ist wohl nicht editierbar?

    Bitte um Verzeihung. Wusste nicht ob da ein Fehler war. Aber es ist schlicht das Standardverhalten.

    Donnerstag, 26. März 2015 20:17