디자이너랑 디버깅시 다르게 보이는 현상

제가 ListView를 만들고있는데 원래대로라면

<GridViewColumn width="60" Header="번호" HeaderContainerStyle="{StaticResource GridViewColumnHeaderTest}">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <Label Content="1" Style="{StaticResource Label_ListView_Center_Number}"/>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>
<Style x:Key="GridViewColumnHeaderTest" TargetType="GridViewColumnHeader">
    <Setter Property="Background" Value="#121212" />
    <Setter Property="BorderBrush" Value="#000000"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="BorderThickness" Value="0,0,0,0"/>
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="Margin" Value="0,0,0,0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1" >
                        <ContentPresenter Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

이런식으로 GridViewColumn에 직접 width 를 주는 식으로 하고 이제 헤더 스타일을 넣어줬는데

이제 스타일의 Template의 Border에 바인딩해서 width값을 넣는 방식인

<Style x:Key="GridViewColumnHeaderTest" TargetType="GridViewColumnHeader">
    <Setter Property="Background" Value="#121212" />
    <Setter Property="BorderBrush" Value="#000000"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="BorderThickness" Value="0,0,0,0"/>
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="Margin" Value="0,0,0,0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1" Width="{TemplateBinding Width}">
                        <ContentPresenter Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

이렇게 바꾸고

    <Style TargetType="GridViewColumnHeader" x:Key="GridViewColumnHeader_W40" BasedOn="{StaticResource GridViewColumnHeaderTest}">
        <Setter Property="Width" Value="40"/>
    </Style>

이런식으로 BasedOn 해서 width값만 바꾸는 식으로 사용했습니다.
근데 디자이너에서는 width값이 적용이 안된상태로 보이고 (수치랑 상관없는 크기로 보여지네요)
빌드 했을때는 정상적으로 보이는 현상이 나타나고 있습니다.

혹시 무슨 문제일까요?

1개의 좋아요

디자이너에서는 일시적으로 적용이 안된 것처럼 보일 수 있습니다. 하지만 소스를 봤을 때는 문제가 없어 보이네요. 빌드 또는 Visual Studio 재시작을 했을 때 문제 없이 제대로 적용되어야 하는 것이 맞습니다. 다시 한번 확인해보시고 안되면 샘플을 한번 올려주세요.

질문과는 별개로 ControlTemplate에서 Width를 TemplateBinding으로 하신 이유가 있을까요? 특별히 없다면 Width, Height, Margin과 같은 속성들은 기본적으로 적용되기 때문에 제거하는 것이 더 자연스럽고 좋아보입니다.

아 원래는

<Style x:Key="GridViewColumnHeaderTest" TargetType="GridViewColumnHeader">
    <Setter Property="Background" Value="#121212" />
    <Setter Property="BorderBrush" Value="#000000"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="BorderThickness" Value="0,0,0,0"/>
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="Margin" Value="0,0,0,0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1" >
                        <ContentPresenter Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

이 스타일을 BasedOn 해서 Width값만 새로 넣어주는 식으로 해서

GridViewColumn의 HeaderContainerStyle에 넣어주려 했는데 Width를 넣어줘도 아무변화가 없어서
혹시 Width를 Template에 있는 Border에 Width를 TemplateBinding하면 적용되지 않을까 해서 넣었습니다

1개의 좋아요

다시 확인하니깐 빌드 했을때는 TemplateBinding 안 해도 width값이 적용되는데 역시나 디자이너에서는 재시작해도 값이 적용 안된걸로 보이네요

1개의 좋아요

음, 저도 궁금해서 한번 동일하게 재현해봤는데 제 환경에서는 잘 됩니다. 아마 어떤 환경에서는 되기도 하나 봅니다. Visual Studio 관련 버그 이슈일지도 모르겠네요. 이런 이슈가 좀 있습니다.

노트북으로 재현해봤더니 저도 여기서는 정상이네요…

1개의 좋아요
    <Window.Resources>
        <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
        <Style x:Key="{x:Type ListViewItem}"
       TargetType="ListViewItem">
            <Setter Property="SnapsToDevicePixels"
          Value="true" />
            <Setter Property="OverridesDefaultStyle"
          Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Border"
                Padding="2"
                SnapsToDevicePixels="true"
                Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="Red" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Height" Value="20"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Border"  SnapsToDevicePixels="true" Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                     Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="#11737B" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                                <Setter Property="Background" Value="#1B1E25" />
                                <Setter Property="Foreground" Value="#EAEAEA" />
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="Margin" Value="2,-1,0,0" />
                            </Trigger>
                            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                                <Setter Property="Background" Value="#0F1014" />
                                <Setter Property="Foreground" Value="#EAEAEA" />
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="Margin" Value="2,0,0,1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ListViewMain" TargetType="ListView">
            <Setter Property="Background" Value="Black" />
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="Width" Value="306"/>
            <Setter Property="AlternationCount" Value="2"/>
            <Setter Property="Height" Value="80"/>
            <Setter Property="Padding" Value="-1"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListView}">
                        <Border Padding="0">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="26" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid Background="#1D2129">
                                    <Border BorderBrush="#000000" BorderThickness="0,0,0,2"/>
                                    <GridViewHeaderRowPresenter Columns="{Binding Path=View.Columns, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}" />
                                </Grid>
                                <Grid Grid.Row="1" Background="{TemplateBinding Background}">
                                    <Border BorderBrush="#000000" BorderThickness="0,0,0,1"/>
                                    <ScrollViewer>
                                        <ItemsPresenter />
                                    </ScrollViewer>
                                </Grid>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="ListView" x:Key="ListView306x128" BasedOn="{StaticResource ListViewMain}">
            <Setter Property="Width" Value="306"/>
            <Setter Property="Height" Value="128"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        </Style>
        
        <Style x:Key="GridViewColumnHeader" TargetType="GridViewColumnHeader">
            <Setter Property="Background" Value="#12151A" />
            <Setter Property="BorderBrush" Value="#000000"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="#959595" />
            <Setter Property="FontSize" Value="11"/>
            <Setter Property="Margin" Value="2,0,0,2"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Grid>
                            <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="{TemplateBinding BorderThickness}">
                                <ContentPresenter Margin="{TemplateBinding Padding}" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="GridViewColumnHeader" x:Key="GridViewColumnHeader50" BasedOn="{StaticResource GridViewColumnHeader}">
            <Setter Property="Width" Value="50"/>
        </Style>
        <Style TargetType="GridViewColumnHeader" x:Key="GridViewColumnHeader90" BasedOn="{StaticResource GridViewColumnHeader}">
            <Setter Property="Width" Value="90"/>
        </Style>
        <Style TargetType="GridViewColumnHeader" x:Key="GridViewColumnHeader165" BasedOn="{StaticResource GridViewColumnHeader}">
            <Setter Property="Width" Value="165"/>
        </Style>

    </Window.Resources>
    <Grid>
        <StackPanel Orientation="Horizontal">
            <ListView ItemContainerStyle="{StaticResource ListViewItemStyle}"  
              Style="{StaticResource ListView306x128}" d:ItemsSource="{d:SampleData ItemCount=3}">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="이름" HeaderContainerStyle="{StaticResource GridViewColumnHeader50}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="테스트" HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="번호"  HeaderContainerStyle="{StaticResource GridViewColumnHeader90}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="1" HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="나이" HeaderContainerStyle="{StaticResource GridViewColumnHeader165}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="13" HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </StackPanel>
    </Grid>
</Window>

혹시 제가 테스트용으로 쓴 코드에 문제가 있는지 봐주실 수 있나요?
처음엔 정상적으로 나오다가 디버깅 하고나면 헤더의 크기가 List들의 Text크기 사이즈로 변하네요 디자이너에서는…