0

I created a custom header for my GroupBox like the following image:

Custom GroupBox

I want also to set a Binding on the Backgroud of this header, so I wrote the following code:

 <GroupBox Width="130"
                      Height="80"
                      BorderBrush="Black"
                      Margin="5"
                      Grid.Row="0"
                      Background="{Binding HColor}">
                <GroupBox.HeaderTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Black"
                                BorderThickness="1"
                                CornerRadius="3"
                                HorizontalAlignment="Stretch"
                                Width="70"
                                Margin="-2,0,-3,-1"
                                Height="20"
                                Background="{Binding HColor}">
                            <TextBlock Text="Hubs"
                                       Foreground="Black"
                                       FontWeight="DemiBold"
                                       HorizontalAlignment="Center" />
                        </Border>
                    </DataTemplate>
                </GroupBox.HeaderTemplate>
 </GroupBox>

After execution, I the GroupBox's Background is colord in the right way, but not the header !

Custom GroupBox

Is anyone able to explain to me why it's not working well ?

4 Answers 4

3

you can use like that ;

    <GroupBox Width="130"
                  Height="80"
                  BorderBrush="Black"
                  Margin="5"
                  Grid.Row="0"
                  Background="{Binding HColor}">
        <GroupBox.Header>
            <Border BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="3"
                            HorizontalAlignment="Stretch"
                            Width="70"
                            Margin="-2,0,-3,-1"
                            Height="20"
                            Background="{Binding Path=HColor}">
                <TextBlock Text="Hubs"
                                   Foreground="Black"
                                   FontWeight="DemiBold"
                                   HorizontalAlignment="Center" />
            </Border>

        </GroupBox.Header>

        <!--<DataTemplate>
                <Border BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="3"
                            HorizontalAlignment="Stretch"
                            Width="70"
                            Margin="-2,0,-3,-1"
                            Height="20"
                            Background="{Binding Path=HColor}">
                    <TextBlock Text="Hubs"
                                   Foreground="Black"
                                   FontWeight="DemiBold"
                                   HorizontalAlignment="Center" />
                </Border>
            </DataTemplate>-->

    </GroupBox>
2
  • It's not working like that ! I tried before, and the header was a string describing the Border ! and not it's view. Thank's @Ugur
    – NTinkicht
    Commented Jul 25, 2014 at 10:37
  • Actually , I have tried and it is working. I have an image but they dont allow me to put image because of low reputation
    – Ugur
    Commented Jul 25, 2014 at 10:40
1

Solution Found !

I had to make an internal binding in the Xaml, between the backgroud of the GroupBox and it's header. Like the followiing code:

  <GroupBox Name="HubGroupBox"
                      Width="130"
                      Height="80"
                      BorderBrush="Black"
                      Margin="5"
                      Grid.Row="0"
                      Background="{Binding HubColor}">
                <GroupBox.HeaderTemplate>
                    <DataTemplate>
                        <Border Canvas.ZIndex="2"
                                BorderBrush="Black"
                                BorderThickness="1"
                                CornerRadius="3"
                                HorizontalAlignment="Stretch"
                                Width="70"
                                Margin="-2,0,-3,-1"
                                Height="20"
                                Background="{Binding ElementName=HubGroupBox, Path=Background}">
                            <TextBlock Text="Hubs"
                                       Foreground="Black"
                                       FontWeight="DemiBold"
                                       HorizontalAlignment="Center" />
                        </Border>
                    </DataTemplate>
                </GroupBox.HeaderTemplate>
  </GroupBox>

The result is:

enter image description here

0

You can use this binding without element name

<GroupBox Width="130"
                  Height="80"
                  BorderBrush="Black"
                  Margin="5"
                  Grid.Row="0"
                  Background="{Binding HColor}">
        <GroupBox.HeaderTemplate>
            <DataTemplate>
                <Border BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="3"
                            HorizontalAlignment="Stretch"
                            Width="70"
                            Margin="-2,0,-3,-1"
                            Height="20" Background="{Binding Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}}">
                    <TextBlock Text="Hubs"
                                   Foreground="Black"
                                   FontWeight="DemiBold"
                                   HorizontalAlignment="Center" />
                </Border>
            </DataTemplate>
        </GroupBox.HeaderTemplate>
    </GroupBox>
0

You can rely on your VM data instead of control properties

<GroupBox Name="HubGroupBox"
                  Width="130"
                  Height="80"
                  BorderBrush="Black"
                  Margin="5"
                  Grid.Row="0"
                  DataSource="{Binding VMObject}">
            <GroupBox.HeaderTemplate>
                <DataTemplate>
                    <Border Canvas.ZIndex="2"
                            BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="3"
                            HorizontalAlignment="Stretch"
                            Width="70"
                            Margin="-2,0,-3,-1"
                            Height="20"
                            Background="{Binding ElementName=HubGroupBox, Path=DataSource.HColor}">
                        <TextBlock Text="Hubs"
                                   Foreground="Black"
                                   FontWeight="DemiBold"
                                   HorizontalAlignment="Center" />
                    </Border>
                </DataTemplate>
            </GroupBox.HeaderTemplate>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.