12

このような GroupBox デザインを作成しようとしています。

ここに画像の説明を入力

私は見てきたGroupBox.HeaderTemplate

しかし、幅 100% の青色の背景色の作成に問題があります。国境も同じです。

これまでの私のコード

<GroupBox.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Content="{Binding}" HorizontalAlignment="Stretch" Background="#25A0DA" Grid.Column="0" Height="20" Padding="5,0,0,0" Margin="1" Foreground="White"/>
                    </Grid>
                </DataTemplate>
            </GroupBox.HeaderTemplate>

で、これが今の姿です。

ここに画像の説明を入力

4

5 に答える 5

53

デフォルトのGroupBoxテンプレートを使用して、希望どおりに表示されるように変更します

例えば、

  <ControlTemplate TargetType="GroupBox">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Border Grid.Row="0"
              BorderThickness="1"
              BorderBrush="#25A0DA"
              Background="#25A0DA">
          <Label Foreground="White">   
              <ContentPresenter Margin="4"
                          ContentSource="Header"
                          RecognizesAccessKey="True" />
          </Label>
      </Border>

      <Border Grid.Row="1"
              BorderThickness="1,0,1,1"
              BorderBrush="#25A0DA">
        <ContentPresenter Margin="4" />
      </Border>

    </Grid>
  </ControlTemplate>
于 2012-02-20T14:14:22.107 に答える
5

このスレッドは少し古いですが、誰かがこれを役に立つと思うかもしれません...

全幅のヘッダーが必要な場合は、Jakob の回答を少し変更します。

親 GroupBox にバインドできるため、名前付き GroupBox がなくても使用できます。

<GroupBox.HeaderTemplate>
  <DataTemplate>
    <TextBlock Text="{Binding}" 
           Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=GroupBox}, Path=ActualWidth }"
           Background="#25A0DA" Grid.Column="0" Height="20" Padding="5,0,0,0" Margin="1" Foreground="White"/>
  </DataTemplate>
</GroupBox.HeaderTemplate>
于 2014-04-25T11:01:04.037 に答える
4

完全に異なるテンプレートを作成しないと、例とまったく同じように表示することはできませんが、HeaderTemplateのグリッドの幅をグループボックスの幅にバインドし、適切なマージンとパディングを指定することで、簡単なショットを作成しました。 ：

<GroupBox.HeaderTemplate>
    <DataTemplate>
        <Grid Width="{Binding ElementName=groupBox1, Path=ActualWidth}" Margin="-10, 0, -10, 0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Content="{Binding}" HorizontalAlignment="Stretch" Background="#25A0DA" Grid.Column="0" Height="20" Padding="5, 0, 0, 0" Margin="10" Foreground="White"/>
        </Grid>
    </DataTemplate>
</GroupBox.HeaderTemplate>

結果は次のようになります。

ここに画像の説明を入力してください

于 2012-02-20T14:02:16.923 に答える
0

これを試して ：

  <GroupBox BorderThickness="0"  Header="BELT WEIGHER BC#1 JETTY" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="193" Width="374" OpacityMask="Black" BorderBrush="#FF1864D3" FontSize="16" FontWeight="Bold">
        <GroupBox.HeaderTemplate >
            <DataTemplate>
                <TextBlock Text="{Binding}"  
                 Width="357" Grid.Column="0" Padding="5,3,0,0" Margin="0,0,0,0"  Foreground="White" Height="33">
                    <TextBlock.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="White" Offset="0.968"/>
                            <GradientStop Color="Blue" Offset="0.828"/>
                        </LinearGradientBrush>
                    </TextBlock.Background>
                </TextBlock>
            </DataTemplate>
        </GroupBox.HeaderTemplate>
        <Border x:Name="CanvasBorder" BorderBrush="Blue"  BorderThickness="1" Margin="3,0,3,0">
            <Canvas  Background="white" Margin="0,0,0,0" >
                <Label Content="Feed Rate" Canvas.Left="10" Canvas.Top="10" FontWeight="Normal" FontSize="12"/>
                <Label Content="Totalizer 1" Canvas.Left="10" Canvas.Top="35" FontWeight="Normal" FontSize="12"/>
                <Label Content="Totalizer 2" Canvas.Left="10" Canvas.Top="60" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="Belt Load" Canvas.Left="10" Canvas.Top="85" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="Belt Speed" Canvas.Left="10" Canvas.Top="110" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <TextBlock x:Name="BC1_Feedrate" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="13" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_Totalizer1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="38" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_Totalizer2" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="63" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_BeltLoad" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="88" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_BeltSpeed" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="113" Padding="0,0,4,0"/>
                <Label Content="ton/hour" Canvas.Left="228" Canvas.Top="10" FontWeight="Normal" FontSize="12"/>
                <Label Content="ton" Canvas.Left="228" Canvas.Top="35" FontWeight="Normal" FontSize="12"/>
                <Label Content="ton" Canvas.Left="228" Canvas.Top="60" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="kg/meter" Canvas.Left="228" Canvas.Top="85" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="meter/second" Canvas.Left="228" Canvas.Top="110" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
            </Canvas>
        </Border>
    </GroupBox>
于 2015-12-04T09:04:12.353 に答える