ItemsControl을 이용해서 헤더+셀형식으로 테이블을 만든 경우, 헤더부분과 셀부분이 크기를 공유하지 않아 테이블이 어긋나 보이는 경우가 있다.

image

image


다음과 같이 ItemsControlGrid.IsSharedSizeScope="True"로 설정하고, 공유하려는 헤더,셀 그리드의 SharedSizeGroup속성에 동일한 값을 지정하면, 해당 헤더와 셀의 크기가 공유되서 어긋나지 않는다.

<ItemsControl Grid.IsSharedSizeScope="True"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Template>
        <ControlTemplate TargetType="{x:Type ItemsControl}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition MinHeight="35"
                                   Height="auto"
                                   SharedSizeGroup="shared" />
                </Grid.RowDefinitions>

                <Label Content="Header1"
                       Background="LightGreen"
                       BorderBrush="Black"
                       BorderThickness="1" />
                <Label Content="Header2"
                       Background="LightGreen"
                       BorderBrush="Black"
                       BorderThickness="1,0,1,1"
                       Grid.Row="1" />

                <ItemsPresenter Grid.Column="1"
                                Grid.RowSpan="2" />
            </Grid>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Width="50">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition SharedSizeGroup="shared" />
                </Grid.RowDefinitions>
                <TextBox Text="{Binding X1}"
                         BorderBrush="Black"
                         BorderThickness="1"
                         Grid.Row="0" />
                <TextBox Text="{Binding X2}"
                         TextWrapping="Wrap"
                         BorderBrush="Black"
                         BorderThickness="1,0,1,1"
                         Grid.Row="1" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>


image

카테고리:

업데이트:

댓글남기기