Question

我正在尝试制作一个ComboBox，其中DropDown或Popup右对齐，而ComboBox右侧没有足够的空间。

我可以通过将其FlowDirection设置为RightToLeft来使其正确对齐，但我需要知道何时右对齐它。所以我试图通过使用它的X-Coordinate（相对于RootVisual）加上它的宽度来计算Popup的右边缘。如果它的右边缘值大于RootVisual的宽度，那么ComboBox需要右边对齐它的Popup或DropDown。

现在我的问题是，我认为Popup继承了ComboBox的坐标。为什么弹出窗口的坐标不正确？是因为Popup包含在ComboBox的模板中吗？这是我的示例代码......

ComboBox的简化模板......

<Style TargetType="local:CustomComboBox">
    <Setter Property="Padding" Value="6,2,25,2"/>
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="TabNavigation" Value="Once"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:CustomComboBox">
                <Grid>
                    <Border x:Name="ContentPresenterBorder">
                        <Grid>
                            <ToggleButton x:Name="DropDownToggle" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" Margin="0" Style="{StaticResource comboToggleStyle}" VerticalAlignment="Stretch">
                                <Path x:Name="BtnArrow" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " HorizontalAlignment="Right" Height="4" Margin="0,0,6,0" Stretch="Uniform" Width="8">
                                    <Path.Fill>
                                        <SolidColorBrush x:Name="BtnArrowColor" Color="#FF333333"/>
                                    </Path.Fill>
                                </Path>
                            </ToggleButton>
                            <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <TextBlock Text=" "/>
                            </ContentPresenter>
                        </Grid>
                    </Border>
                    <Popup x:Name="Popup">
                        <Border x:Name="PopupBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" HorizontalAlignment="Stretch" Height="Auto">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                    <GradientStop Color="#FFFEFEFE" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Control的代码背后......

public class CustomComboBox : ComboBox
{
    private Popup _popup;
    private ScrollViewer _scrollViewer;

    public CustomComboBox()
    {
        this.DefaultStyleKey = typeof(CustomComboBox);
    }

    protected override void OnDropDownOpened(EventArgs e)
    {
        GeneralTransform gt = _popup.TransformToVisual(App.Current.RootVisual as UIElement);
        Point popupOffset = gt.Transform(new Point(0, 0));

        double popupRightEdge = popupOffset.X + _popup.ActualWidth;

        double appRightEdge = (App.Current.RootVisual as FrameworkElement).ActualWidth;

        if (popupRightEdge > appRightEdge)
        {
            _popup.FlowDirection = FlowDirection.RightToLeft;
            _scrollViewer.FlowDirection = FlowDirection.LeftToRight;
        }

        base.OnDropDownOpened(e);
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        _popup = GetTemplateChild("Popup") as Popup;
        _scrollViewer = GetTemplateChild("ScrollViewer") as ScrollViewer;
    }
}

Answer 1

ComboBox的ControlTemplate中的ValidationErrorElement导致Popup向右对齐而不是实际ComboBox的右边缘。我建议将弹出控件的名称（“Popup”）更改为ComboBox的ControlTemplate中的“DropDownPopup”，然后将Popup的IsOpen属性绑定到ToggleButton的IsChecked属性。 Popup是ComboBox的一个控制部分，我怀疑有一些代码连接到它，使它的行为与它一样。

虚拟化StackPanel我们使用了更高的性能但创建了一些其他奇怪的行为。在Virtualizing StackPanel上设置固定宽度修复它。在弹出窗口上设置固定宽度也可以解决此问题。

ComboBox模板中的弹出坐标？

1 个答案: