Geek Answers Handbook

Negative WPF fields do not display correctly

I am trying to simulate a tab control using nice TabHeader and TabContent. The control should look something like this:

desired header border

This is achieved by setting "Margin" the first header - "HOME" to Margin = "2 0 2 -1".

RELEASE: if I resized the window to a certain smaller width, the title element visually fixed its contents. Here is the result:

undesired border

I really would like to know why this is happening and how I avoid it.

Xaml example to prove the problem:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="550" Width="525">
<Grid Margin="0 50">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Border  BorderThickness="1" BorderBrush="Black" Grid.Row="1"/>

    <StackPanel Orientation="Horizontal" Grid.Row="0">
        <Border Width="50" Margin="2 0 2 -1" BorderThickness="1 1 1 0" BorderBrush="Black" Background="White">
            <TextBlock Text="HOME" />
        </Border>
        <Border Width="150" Margin="2 -20" Height="20" BorderThickness="1 1 1 0" >
            <TextBlock Text="EDIT" />
        </Border>
    </StackPanel>
</Grid>

+4
source share
3 answers

, XAML (- ). StackPanel ( , ), ( , ), ; : . .

StackPanel :

<StackPanel Orientation="Horizontal" Grid.Row="0" Margin="2 0 2 -1">
            <Border Width="50"  BorderThickness="1 1 1 0" BorderBrush="Black" Background="White">
                <TextBlock Text="HOME" />
            </Border>
            <Border Width="150" Height="20" BorderThickness="1 1 1 0" >
                <TextBlock Text="EDIT" />
            </Border>
        </StackPanel>
+2

2

   <Grid Margin="0,50">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Border Grid.ColumnSpan="2"  BorderThickness="1" BorderBrush="Black" Grid.Row="1" />

    <StackPanel Orientation="Horizontal" Grid.Row="0">
        <Border Width="50" Margin="2,0,2,-1" BorderThickness="1,1,1,0" BorderBrush="Black" Background="White">
            <TextBlock Text="HOME" />
        </Border>
        <Border Width="50" Margin="2" Height="20" BorderThickness="1,1,1,0" >
            <TextBlock Text="EDIT" />
        </Border>
    </StackPanel>
</Grid>

.

EDIT , .

Cheers,

+1

I would suggest that this is an oddity in layout code StackPanel. You should be able to get around this by moving the negative field to StackPanel, and not to the tabs inside:

<Grid Margin="0 50" UseLayoutRounding="True">
  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Border BorderThickness="1" BorderBrush="#7FFF0000" Grid.Row="1" />
  <StackPanel Orientation="Horizontal" Grid.Row="0" Margin="0,0,0,-1">
    <Border Width="50" Margin="2 0 2 0" BorderThickness="1 1 1 0" BorderBrush="Lime" Background="Yellow">
      <TextBlock Text="HOME" />
    </Border>
    <Border Width="150" Margin="2 0 2 0" Height="20" BorderBrush="Blue" BorderThickness="1 1 1 0" Background="Yellow">
      <TextBlock Text="EDIT" />
    </Border>
  </StackPanel>
</Grid>

Please note that I changed the colors to help with visual debugging. This is a useful technique, but you probably want to change it :).

0
source

More articles:


All Articles