動態寬度綁定到自定義組合框中使用

我使用與風格的自定義組合框的下拉菜單（彈出），我想通過coading動態地設置彈出窗口的寬度，以便自動調整彈出窗口的寬度動態寬度綁定到自定義組合框中使用

Change this to

this

所以我想改變像動態第二圖像彈出（任何可能thesize組合框的）我使用的樣式如下

<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}"> 
     <Setter Property="Foreground" Value="#666666"/> 
     <Setter Property="FontFamily" Value="Arial"/> 
     <Setter Property="FontSize" Value="13"/> 
     <Setter Property="Height" Value="28"/> 
     <Setter Property="BorderThickness" Value="1.5"/> 
     <Setter Property="Padding" Value="4,3"/> 
     <Setter Property="Margin" Value="5"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ComboBox}"> 
        <Grid>        
         <Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2" Width="{Binding ActualWidth,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"> 
          <Border Name="DropDownBorder" Width="Auto" Height="Auto" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" BorderBrush="#FFbbbbbb"> 
           <Border.Background> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="White" Offset="0" /> 
             <GradientStop Color="#FFE9E9E9" Offset="1" /> 
            </LinearGradientBrush> 
           </Border.Background> 
           <ScrollViewer CanContentScroll="true"> 
            <ItemsPresenter /> 
           </ScrollViewer> 
          </Border> 
         </Popup>       
         <ToggleButton Style="{StaticResource cmbToggle}" Grid.ColumnSpan="2" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/> 
         <ContentPresenter HorizontalAlignment="Left" Margin="5,0,0,0" VerticalAlignment="Center" IsHitTestVisible="false" Content="{TemplateBinding SelectionBoxItem}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

<Style x:Key="cmbToggle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border Name="cmbBorder" CornerRadius="3" BorderBrush="#FFaaaaaa" BorderThickness="1.5"> 
         <Border.Background> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="White" Offset="0" /> 
           <GradientStop Color="#FFE9E9E9" Offset="1" /> 
          </LinearGradientBrush> 
         </Border.Background> 
         <Border BorderBrush="#FFaaaaaa" BorderThickness="1,0,0,0" Width="20" HorizontalAlignment="Right">         
          <Polygon Name="pol" Fill="#FF787878" Points="4,9 8,14 12,9" Stroke="#FF787878" StrokeThickness="0" Margin="1 1 0 0"> 
          </Polygon> 
         </Border> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="True"> 
          <Setter Property="CornerRadius" TargetName="cmbBorder" Value="4,4,0,0"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

所以我的想法是動態地改變Popup的寬度（Combobox寬度 - togglebutton寬度=彈出寬度）。我已經在App.xaml中編寫了樣式如何做到這一點，請幫助我。提前致謝。

來源

2013-06-13 Rahul Saksule

爲什麼不檢查默認組合框的樣式並查看MS是如何工作的？據我記得你想要的是組合框的默認行爲。 – Terry

@Derry不，這不是默認行爲。至少在Windows-8中不是這樣。有點高興這不是默認行爲，因爲使用這個所需的'Style'，每次使用「箭頭」切換'ComboBox'時，您都需要將鼠標移動到不僅僅是向下，而且還需要做出選擇只是怪異的國際海事組織。 – Viv

好了，所以在你ToggleButtonStyle我們可以看到Border控股Polygon箭頭是Width 20。這就是Width從Popup

被刪除。因此，我們可以這樣做：

首先2列的添加到Grid在ComboBoxControlTemplate

<ControlTemplate TargetType="{x:Type ComboBox}"> 
    <Grid> 
    <!-- New Bit --> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="20" /> 
    </Grid.ColumnDefinitions> 
    <!-- End of New Bit --> 
    <Popup x:Name="PART_Popup" 
      Grid.ColumnSpan="2" 
    ...

，然後更新的Popup的Width到

<Popup x:Name="PART_Popup" 
     Grid.ColumnSpan="2" 
     Width="{Binding Path=ColumnDefinitions[0].ActualWidth, 
         RelativeSource={RelativeSource Mode=FindAncestor, 
                 AncestorType=Grid}}" 
...

你的Style已經有ColumnSpan提到適當的控制，所以沒有別的是必要的。這應該會給你你想要的輸出。

來源

2013-06-13 08:55:00 Viv

完美。謝謝你loooooooooot –

@RahulSaksule你的歡迎:) – Viv

你可以直接使用

<ComboBox.Resources> 
      <Style TargetType="{x:Type Popup}"> 
       <Setter Property="Width" Value="110"/> 
      </Style> 
     </ComboBox.Resources>

來源

2013-11-26 19:20:23

使用Dhaval Patel的解決方案綁定到視圖模型屬性的伎倆。我在集合更改時使用FormattedText計算最大寬度，並在下面綁定它。

<ComboBox.Resources> 
      <Style TargetType="{x:Type Popup}"> 
       <Setter Property="Width" Value="{Binding MaxWidthOfMyCollection"/> 
      </Style> 
     </ComboBox.Resources>

來源

2014-11-27 01:38:18

動態寬度綁定到自定義組合框中使用

回答

相關問題