1

好的，所以我为键盘创建了一个用户控件。它看起来像这样：

在此处输入图像描述

代码是：

<DockPanel DockPanel.Dock="Left">
    <StackPanel DockPanel.Dock="Left">
        <Button Content="1"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnOne" />

        <Button Content="4"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnFour" />

        <Button Content="7"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnSeven" />

        <Button Content="0"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnZero" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left">
        <Button Content="2"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnTwo" />

        <Button Content="5"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnFive" />

        <Button Content="8"
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnEight" />

        <Button Content="."
                Height="60"
                Width="60"
                Margin="8"
                Name="bttnDecimal" />
    </StackPanel>

    <DockPanel DockPanel.Dock="Left">
        <StackPanel DockPanel.Dock="Bottom">
            <Button Content="Del"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Width="Auto"
                    Margin="8"
                    Height="60"
                    Name="bttnDelete" />
        </StackPanel>

        <StackPanel DockPanel.Dock="Left">
            <Button Content="3"
                    Height="60"
                    Width="60"
                    Margin="8"
                    Name="bttnThree" />

            <Button Content="6"
                    Height="60"
                    Width="60"
                    Margin="8"
                    Name="bttnSix" />

            <Button Content="9"
                    Height="60"
                    Width="60"
                    Margin="8"
                    Name="bttnNine" />
        </StackPanel>
        <StackPanel DockPanel.Dock="Left"
                    Orientation="Horizontal">
            <Button Content="Ent"
                    HorizontalAlignment="Stretch"
                    VerticalContentAlignment="Center"
                    Width="60"
                    Margin="8"
                    VerticalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    Height="Auto"
                    Name="bttnEnter" />
        </StackPanel>
    </DockPanel>
</DockPanel>

现在，当我将键盘添加到窗口时，窗口会更改按钮的大小，如下所示：

在此处输入图像描述

代码是：

<DockPanel>
    <StackPanel DockPanel.Dock="Top">
        <Label Content="New Item"
               Style="{StaticResource MyLabel2}"
               FontStyle="Italic" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left"
                Margin="0,20,0,0">
        <Label Content="BHA Description"
               HorizontalContentAlignment="Right"
               FontSize="20" />

        <Label Content="" />

        <Label Content="OD"
               HorizontalContentAlignment="Right"
               FontSize="20" />

        <Label Content="" />

        <Label Content="Length"
               HorizontalContentAlignment="Right"
               FontSize="20" />

        <Label Content="" />

        <Button Name="bttnSave"
                Content="Save"
                Margin="2,14,2,2" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left"
                Margin="10,20,25,0">
        <ComboBox Name="cmbDesc"
                  HorizontalContentAlignment="Right"
                  FontSize="23" />

        <Label Content="" />

        <ComboBox Name="cmbOd"
                  HorizontalContentAlignment="Right"
                  FontSize="23" />

        <Label Content="" />

        <TextBox Text="Length"
                 HorizontalContentAlignment="Right"
                 FontSize="25"
                 MaxLength="10" />

        <Label Content="" />

        <Button Name="bttnCancel"
                Content="Cancel"
                Click="bttnCancel_Click"
                Margin="2,14,2,2" />
    </StackPanel>

    <StackPanel DockPanel.Dock="Left">

        <UserControls:Keypad />
    </StackPanel>
</DockPanel>

现在，我确实有一个默认按钮样式，其代码是：

<Style TargetType="{x:Type Button}"
       BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="OverridesDefaultStyle"
            Value="True" />
    <Setter Property="Margin"
            Value="2" />
    <Setter Property="FontFamily"
            Value="Calibri" />
    <Setter Property="FontSize"
            Value="16px" />
    <Setter Property="FontWeight"
            Value="Bold" />
    <Setter Property="Height"
            Value="75" />
    <Setter Property="Width"
            Value="150" />
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1"
                                 MappingMode="RelativeToBoundingBox"
                                 StartPoint="0.5,0">
                <GradientStop Color="#FFF5EFEF"
                              Offset="0" />
                <GradientStop Color="#FFA09C9C"
                              Offset="0.808" />
                <GradientStop Color="#FFA09C9C"
                              Offset="1" />
                <GradientStop Color="#FFF5EFEF"
                              Offset="0.192" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border"
                        BorderThickness="2"
                        Padding="4,2"
                        BorderBrush="Black"
                        CornerRadius="7"
                        Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Name="contentShadow"
                                          Style="{StaticResource ShadowStyle}">
                            <ContentPresenter.RenderTransform>
                                <TranslateTransform X="1.0"
                                                    Y="1.0" />
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Name="content" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="border"
                                Property="BorderBrush"
                                Value="Red" />
                        <Setter Property="Foreground"
                                Value="Red" />
                    </Trigger>
                    <Trigger Property="IsPressed"
                             Value="True">
                        <Setter Property="Foreground"
                                Value="#FFFDFDFD" />
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0.5,1"
                                                     MappingMode="RelativeToBoundingBox"
                                                     StartPoint="0.5,0">
                                    <GradientStop Color="Red"
                                                  Offset="0" />
                                    <GradientStop Color="Red"
                                                  Offset="1" />
                                    <GradientStop Color="Black"
                                                  Offset="0.573" />
                                    <GradientStop Color="Black"
                                                  Offset="0.402" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="content"
                                Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform Y="1.0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我的问题是，当我在用户控件本身中硬编码高度/宽度值时，为什么按钮会恢复为默认设置？我怎样才能解决它，使它不会那样做？

4

2 回答 2

5

我会使用Grid基于布局：

我想DockPanel，这些StackPanel实例正在做一些奇怪的事情——老实说，如果你想要一个统一的网格，比如键盘，这是要走的路

<Grid>
    <Grid.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="8" />
        </Style>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Button Grid.Column="0" Grid.Row="0">1</Button>
    <Button Grid.Column="1" Grid.Row="0">2</Button>
    <Button Grid.Column="2" Grid.Row="0">3</Button>
    <Button Grid.Column="3" Grid.Row="0" Grid.RowSpan="3">Ent</Button>
    <Button Grid.Column="0" Grid.Row="1">4</Button>
    <Button Grid.Column="1" Grid.Row="1">5</Button>
    <Button Grid.Column="2" Grid.Row="1">6</Button>
    <Button Grid.Column="0" Grid.Row="2">7</Button>
    <Button Grid.Column="1" Grid.Row="2">8</Button>
    <Button Grid.Column="2" Grid.Row="2">9</Button>
    <Button Grid.Column="0" Grid.Row="3">0</Button>
    <Button Grid.Column="1" Grid.Row="3">.</Button>
    <Button Grid.Column="2" Grid.Row="3" Grid.ColumnSpan="2">Del</Button>
</Grid>

无论您想制作多大或多小，它都可以完美缩放 - 如果需要，您可以通过 usercontrol 属性进行一些模板绑定来设置按钮边距等属性

如果我能提供帮助，我真的不会使用DockPanel它——我认为它不是最直观的控件

编辑：我在 400 x 400 区域中并排添加了您的计算布局和上面的布局 - 这就是结果

不要将停靠用于基于网格的布局！

（忽略网格布局上的 1 按钮，我在测试样式时明确将宽度设置为 150，但忘记将其设置回来！如果删除显式宽度，它会像其他按钮一样完美缩放）

于 2013-08-14T15:23:41.570 回答
-2

您没有在顶部 DockPanel 上将 LastChildFill 属性设置为 False。这就是“Ent”改变大小和移动屏幕的原因。

您还将“Del”上的 Horizo​​ntalAlignment 设置为拉伸。尝试将其设置为 Left，但可能与 LastChildFill 更正有关。

整体调整大小是将 Horizo​​ntalAlignment 设置为 Stretch 设置为 Left。

于 2013-08-14T15:10:20.717 回答