如何在代碼隱藏中獲取WPF擴展器切換按鈕的寬度

Question

我想建立一個自定義控件，將可擴展的行添加到網格中。 為了匹配可擴展行的列，我添加了另一個網格作為擴展器標題和內容。 但是，這些列向右稍微傾斜（參見圖片）。 我認為是因為標題大小？

如何訪問切換按鈕代碼的寬度，以便可以相應地更改columndefinitions？

謝謝！

Answer 1

有幾種方法可以解決此問題。

人們可能會嘗試通過查看控件模板並進行補償來自己找到該切換按鈕的寬度，但這是不可靠的，因為該模板可以在.NET版本（如果我沒記錯的話，以及操作系統）之間進行更改，並且無論如何都難以實現。

第二種方法是嘗試以編程方式找到寬度並以此方式進行補償，但這仍然需要深入研究控制模板（請參見上面的問題）

第三是讓布局引擎為您解決問題。 您可以通過共享 2-4列的列寬並將第1列的寬度設置為“ *”來實現。 但是，最初這樣做會產生不希望的結果，因為Expander Header模板無法設置Horizo​​ntalContentAlignment。

有了上面提到的一些風險，您可以通過代碼隱藏在模板中四處挖掘來解決此問題， 如此處所述，但仍不完善。

看起來某處有邊界或邊距。 讓我們將擴展器的BorderThickness設置為0。

啊！ 更好-（空格消失了），但是.NET 4.5中的網格（帶有黑色邊框的紅色）和綠色之間仍然存在間隙。 我在合理的時間內找不到該間隙的來源，因此我只是將擴展器的“邊距”設置為0,0，-1,0。 根據內容的不同，可能需要在擴展器內部對此進行補償，並調出隱藏的CSS hack記憶（假設XAML會更好，不是嗎？）

最終結果：

XAML：

<Window x:Class="Sandbox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="800" SnapsToDevicePixels="True">
<Window.Resources>
    <DataTemplate x:Key="StretchedHeaderTemplate">
        <Border HorizontalAlignment="Stretch" Loaded="Border_Loaded">
            <ContentPresenter Content="{TemplateBinding Content}"/>
        </Border>
    </DataTemplate>
</Window.Resources>
<Grid Grid.IsSharedSizeScope="True" Margin="15">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="MainLeft"/>
        <ColumnDefinition x:Name="MainRight"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid Grid.Column="0" Background="AliceBlue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="100" SharedSizeGroup="Col2"/>
            <ColumnDefinition Width="100" SharedSizeGroup="Col3"/>
            <ColumnDefinition Width="100" SharedSizeGroup="Col4"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1">
            <TextBlock>Col1</TextBlock>
        </Border>
        <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1">
            <TextBlock>Col2</TextBlock>
        </Border>
        <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1">
            <TextBlock>Col3</TextBlock>
        </Border>
        <Border Grid.Column="3" BorderBrush="Black" BorderThickness="1">
            <TextBlock>Col4</TextBlock>
        </Border>
    </Grid>
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" HorizontalAlignment="Center">January</TextBlock>
        <TextBlock Grid.Column="1" HorizontalAlignment="Center">February</TextBlock>
        <TextBlock Grid.Column="2" HorizontalAlignment="Center">March</TextBlock>
    </Grid>
    <StackPanel Grid.Column="0" Grid.Row="1">
        <Expander HeaderTemplate="{StaticResource StretchedHeaderTemplate}" Background="LightGreen" BorderThickness="0" Margin="0,0,-1,0">
            <Expander.Header>
                <Grid HorizontalAlignment="Stretch" Background="LightCoral">
                    <Grid Grid.Column="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition SharedSizeGroup="Col2"/>
                            <ColumnDefinition SharedSizeGroup="Col3"/>
                            <ColumnDefinition SharedSizeGroup="Col4"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1">
                            <TextBlock>Record1</TextBlock>
                        </Border>
                        <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1">
                            <TextBlock>02.05.2016</TextBlock>
                        </Border>
                        <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1">
                            <TextBlock>05.05.2017</TextBlock>
                        </Border>
                        <Border Grid.Column="3" BorderBrush="Black" BorderThickness="1">
                            <TextBlock>340</TextBlock>
                        </Border>
                    </Grid>
                </Grid>
            </Expander.Header>
        </Expander>
    </StackPanel>
</Grid>

背后的代碼：

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Border_Loaded(object sender, RoutedEventArgs e)
    {
        Border root = (Border)sender;
        ContentPresenter presenter = (ContentPresenter)root.TemplatedParent;
        presenter.HorizontalAlignment = HorizontalAlignment.Stretch;
    }
}

結論：這可行，但是如果發現擴展器的控制模板太亂了，您可能要考慮對其進行覆蓋。