2010-09-08 12 views
15

यह मेरा कॉम्बो-बॉक्स है।डब्ल्यूपीएफ कम्बोबॉक्स: टेक्स्टबॉक्स और ड्रॉप-डाउनलिस्ट में विभिन्न टेम्पलेट

<ComboBox Height="45" HorizontalAlignment="Left" Margin="184,66,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="216"> 
     <ComboBox.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Label Content="{Binding FullName}" Width="150" /> 
        <Label Content="{Binding Title}" Width="100"/> 
        <Label Content="{Binding BranchName}" /> 
       </StackPanel> 
      </DataTemplate> 
     </ComboBox.ItemTemplate> 
    </ComboBox> 

मैं इसे कैसे ताकि केवल FullName बता गया की पाठ बॉक्स भाग में प्रकट होता है बदल सकते हैं, जबकि सभी तीन कॉलम अभी भी ड्रॉप-डाउन भाग में प्रदर्शित हो?

उत्तर

26

दुर्भाग्य से, SelectionBoxItemTemplate एक पाठक संपत्ति है, इसलिए हमें थोड़ा और काम करना है। ItemTemplate करके जब आप चयनित होने पर आइटम को दिखाना चाहते हैं, तो आप को ControlTemplate प्रदान करने के लिए संपादित कर सकते हैं जिसमें अन्य फ़ील्ड शामिल हैं जिन्हें आप प्रदर्शित करना चाहते हैं।

<ComboBox Height="45" HorizontalAlignment="Left" Margin="184,66,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="216"> 
    <ComboBox.ItemTemplate> 
     <DataTemplate> 
      <Label Content="{Binding FullName}" Width="150" /> 
     </DataTemplate> 
    </ComboBox.ItemTemplate> 
    <ComboBox.ItemContainerStyle> 
     <Style TargetType="{x:Type ComboBoxItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
         <Border x:Name="Bd" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           Background="{TemplateBinding Background}"> 
          <StackPanel Orientation="Horizontal"> 
           <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
           <Label Content="{Binding Title}" Width="100"/> 
           <Label Content="{Binding BranchName}" /> 
          </StackPanel> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsHighlighted" Value="True"> 
           <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" /> 
           <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" /> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ComboBox.ItemContainerStyle> 
</ComboBox> 

ComboBoxItem टेम्पलेट के लिए, मैं सिर्फ डिफ़ॉल्ट एक संशोधित, तो यह पूरी तरह से कार्य किया जाना चाहिए।

+0

यह आपके द्वारा किए गए कार्यों को पूरी तरह से समझने में लंबा समय लगेगा, लेकिन यह विज्ञापित के रूप में काम करता है। –

+0

यह कुछ साल हो गया है लेकिन यह उत्तर मेरे लिए उपयोगी था। +1 –

8

यदि कॉम्बोबॉक्स की IsEditable संपत्ति सही पर सेट की गई है, तो आप कॉम्बोबॉक्स की "TextSearch.TextPath" प्रॉपर्टी को उस संपत्ति नाम पर सेट कर सकते हैं, जिसे आप दिखाना चाहते हैं। तो आपके मामले में:

<ComboBox IsEditable="True" TextSearch.TextPath="FullName" .../> 
+0

जो टेक्स्टशर्च को तोड़ता है। –

+1

आपका क्या मतलब है कि यह टेक्स्ट खोज "ब्रेक" करता है? – ASanch

2

इसके बजाय केवल पढ़ने के लिए SelectionBoxItemTemplate संपत्ति मैं एक नया (संलग्न, लिखने योग्य) संपत्ति बनाई और कहा कि मेरी शैली में एक प्रयोग किया जाता का उपयोग कर के। मैं भी मेरी शैली सभी comboboxes कि मेरी नई जुड़ी संपत्ति उपयोग नहीं कर रहे नहीं तोड़ करने के लिए करने के लिए एक ट्रिगर जोड़ा ...

इस तरह यह प्रयोग करें:

<ComboBox ItemsSource="{Binding ...}" SelectedItem="{Binding ..., Mode=TwoWay}"> 
    <controls:ComboBoxSelectionBoxAltTemplateBehaviour.SelectionBoxAltTemplate> 
     <DataTemplate DataType="{x:Type ...}"> 
      ... Template for the selection box ... 
     </DataTemplate> 
    </controls:ComboBoxSelectionBoxAltTemplateBehaviour.SelectionBoxAltTemplate> 
    <ComboBox.ItemTemplate> 
     <DataTemplate DataType="{x:Type ...}"> 
      ... Template for the popup ... 
     </DataTemplate> 
    </ComboBox.ItemTemplate> 
</ComboBox> 

तुम बस करने के लिए इस वर्ग जोड़ने के लिए अपने परियोजना:

public class ComboBoxSelectionBoxAltTemplateBehaviour 
{ 
    public static readonly DependencyProperty SelectionBoxAltTemplateProperty = DependencyProperty.RegisterAttached(
     "SelectionBoxAltTemplate", typeof (DataTemplate), typeof (ComboBoxSelectionBoxAltTemplateBehaviour), new PropertyMetadata(default(DataTemplate))); 

    public static void SetSelectionBoxAltTemplate(DependencyObject element, DataTemplate value) 
    { 
     element.SetValue(SelectionBoxAltTemplateProperty, value); 
    } 

    public static DataTemplate GetSelectionBoxAltTemplate(DependencyObject element) 
    { 
     return (DataTemplate) element.GetValue(SelectionBoxAltTemplateProperty); 
    } 

} 

और SelectionBoxAltTemplate जुड़ी संपत्ति का उपयोग करने के अपने ComboBox शैली बदलने के लिए सेट करते हैं (या क्योंकि मैं "रिक्त नहीं" के लिए एक ट्रिगर सेट नहीं कर सकता है, मैं इसे वापस डिफ़ॉल्ट SelectionBoxItemTemplate करने के लिए सेट करता है, तो संलग्न एक है शून्य):

ContentPresenter ComboBox शैली की ControlTemplate अंदर:

<ControlTemplate.Triggers> 
    <Trigger Property="controls:ComboBoxSelectionBoxAltTemplateBehaviour.SelectionBoxAltTemplate" Value="{x:Null}"> 
     <Setter Property="ContentTemplate" Value="{Binding SelectionBoxItemTemplate, RelativeSource={RelativeSource TemplatedParent}}" TargetName="ContentSite" /> 
    </Trigger> 
    ... 
</ControlTemplate.Triggers> 

पूर्ण शैली::

<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}"> 
    <Setter Property="SnapsToDevicePixels" Value="true" /> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="FontSize" Value="12" /> 
    <Setter Property="Background" Value="{StaticResource ComboBoxBackground}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource ComboBoxBorder}"/> 
    <Setter Property="Margin" Value="6"/> 
    <Setter Property="Padding" Value="3,3,5,3"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBox}"> 
       <Grid> 
        <Grid.ColumnDefinitions>      
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition Width="Auto"/> 
        </Grid.ColumnDefinitions> 
        <Border Name="Border" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/> 
        <ToggleButton Name="ToggleButton2" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Grid.ColumnSpan="2" Background="Transparent"/> 
        <!-- Allows clicking anywhere on the combobox, not only the visible button on the right --> 
        <ToggleButton Focusable="false" Grid.Column="1" x:Name="ToggleButton" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Style="{StaticResource ComboBoxToggleButton}"/> 
        <ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Control.Padding}" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding controls:ComboBoxSelectionBoxAltTemplateBehaviour.SelectionBoxAltTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False" /> 

        <TextBox Visibility="Hidden" HorizontalAlignment="Left" Margin="{TemplateBinding Control.Padding}" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" /> 

        <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide"> 
         <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"> 
          <Border x:Name="DropDownBorder" Background="{StaticResource ComboBoxBackground}" BorderBrush="{StaticResource ComboBoxBorder}" BorderThickness="1" Padding="0,4"> 
           <ScrollViewer SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True" Style="{x:Null}" > 
            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/> 
           </ScrollViewer> 
          </Border> 
         </Grid> 
        </Popup> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="controls:ComboBoxSelectionBoxAltTemplateBehaviour.SelectionBoxAltTemplate" Value="{x:Null}"> 
         <Setter Property="ContentTemplate" Value="{Binding SelectionBoxItemTemplate, RelativeSource={RelativeSource TemplatedParent}}" TargetName="ContentSite" /> 
        </Trigger> 
        <Trigger Property="HasItems" Value="false"> 
         <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder" /> 
        </Trigger> 
        <Trigger Property="IsGrouping" Value="true"> 
         <Setter Property="ScrollViewer.CanContentScroll" Value="false" /> 
        </Trigger> 
        <Trigger Property="IsEditable" Value="true"> 
         <Setter Property="IsTabStop" Value="false" /> 
         <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox" /> 
         <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite" /> 
        </Trigger> 

        <Trigger Property="IsMouseOver" Value="true" SourceName="ToggleButton2"> 
         <Setter Property="Background" Value="{StaticResource ComboBoxMouseOver}" /> 
        </Trigger> 
        <Trigger Property="HasItems" Value="False"> 
         <Setter Property="IsEnabled" Value="False"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<ContentPresenter Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding controls:ComboBoxSelectionBoxAltTemplateBehaviour.SelectionBoxAltTemplate}" /> 

और उत्प्रेरक जुड़ी संपत्ति के बिना ComboBoxed को पश्च संगतता प्रदान करने के लिए

हालांकि यह आइटम टेम्पलेटसेलर्स के साथ काम नहीं कर सकता है, केवल एक ही टेम्पलेट के साथ - लेकिन आप आसानी से एक संलग्न संपत्ति "SelectionBoxAltTemplateSelector" जोड़ सकते हैं जो चयनकर्ता प्रदान करता है और शैली में से एक को पास करता है।

1

वहाँ आपके प्रश्न का उत्तर के लिए एक बहुत अच्छा जवाब अगर आप comboboxes शैली बदलने के लिए नहीं करना चाहती है: https://stackoverflow.com/a/2277488/1070906

यह DataTemplate जो अगर वहाँ कहीं दृश्य में ऊपर एक ComboBoxItem है लग रहा है में एक उत्प्रेरक का उपयोग करता है पेड़, जो चयन बॉक्स में मामला नहीं है।

संबंधित मुद्दे