2

我正在使用带有样式的自定义组合框，我想通过编码动态设置弹出窗口的宽度，以便自动调整弹出窗口的宽度

将此更改为

这个

所以我想像第二张图片一样动态更改弹出窗口（无论组合框的大小如何）我使用的样式如下

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

所以我的想法是动态更改弹出窗口的宽度（组合框宽度 - 切换按钮宽度 = 弹出窗口宽度）。我在 App.xaml 中编写了样式如何做到这一点，请帮助我。提前致谢。

4

3 回答 3

3

好的，所以在你的ToggleButton Style我们可以看到Border持有Polygon箭头是 20 in Width。那就是Width要从Popup

因此我们可以这样做：

首先将 2 列添加到GridinComboBox ControlTemplate

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

然后将Widthof更新Popup为

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

您Style已经ColumnSpan提到了适当的控件，因此不需要其他任何东西。这应该为您提供您正在寻找的输出。

于 2013-06-13T08:55:00.420 回答
1

你可以直接使用

 <ComboBox.Resources>
            <Style TargetType="{x:Type Popup}">
                <Setter Property="Width" Value="110"/>
            </Style>
        </ComboBox.Resources>
于 2013-11-26T19:20:23.497 回答
1

使用绑定到视图模型属性的Dhaval Patel解决方案可以解决问题。当集合更改并将其绑定在下面时，我使用 FormattedText 计算最大宽度。

<ComboBox.Resources>
            <Style TargetType="{x:Type Popup}">
                <Setter Property="Width" Value="{Binding MaxWidthOfMyCollection"/>
            </Style>
        </ComboBox.Resources>
于 2014-11-27T01:38:18.733 回答