WPF Xaml 간격 맞춤(세로 간격 같게) 질문입니다.

⁉️ 프로그래밍 언어 Q&A C# Q&A
1

wpf

위 1번이미지에서 Grid에 Height 사이즈 만큼 Image의 간격을 일정하게 맞춰 그려주고싶은데,

이 부분을 어떻게 맞춰야할지를 모르겠습니다…

<Grid Grid.Row="1">
                <Grid Background="Transparent">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Grid Grid.Column="0" Height="800">
                        <StackPanel>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                        </StackPanel>
                    </Grid>

                    <Grid Grid.Column="1" >
                        <Border Width="1200" Height="800" BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1">
                            <Grid>
                                <Image Source="{Binding ImageSource}" Stretch="Fill"/>
                                <Rectangle>
                                    <Rectangle.Fill>
                                        <SolidColorBrush
                                    Opacity="{Binding ImageOpacity, FallbackValue=1}"
                                    Color="White"/>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Grid>
                        </Border>

                    </Grid>

                    <Grid Grid.Column="2" Height="800">
                        <StackPanel>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                            <Border Width="240" Height="160"  BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                                <Image Stretch="Fill"/>
                            </Border>
                        </StackPanel>
                    </Grid>
                </Grid>
            </Grid>

혹시 태그 속성중 해당 부분을 맞출 수 있는 속성이 있는건지

직접 계산해서 입력해줘야하는건지 궁금합니다!

*내용추가

<Grid Width="300" Height="800" Background="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="160"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="160"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="160"/>          
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="160"/>
                </Grid.RowDefinitions>

                <Grid Grid.Row="0">
                    <Border Width="240" BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                        <Image Stretch="Fill"/>
                    </Border>
                </Grid>

                <Grid Grid.Row="2">
                    <Border Width="240" BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                        <Image Stretch="Fill"/>
                    </Border>
                </Grid>

                <Grid Grid.Row="4">
                    <Border Width="240" BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                        <Image Stretch="Fill"/>
                    </Border>
                </Grid>

                <Grid Grid.Row="6">
                    <Border Width="240" BorderBrush="{DynamicResource ColorForeground}" BorderThickness="1"  Margin="0">
                        <Image Stretch="Fill"/>
                    </Border>
                </Grid>
            </Grid>

Grid RowDefinition으로 셀을 나누고 사이 간격을 * 처리하여 자동으로 채워지게 처리했습니다…

혹시 이 방법 말고 정석? 적인 방법이 있을까요?

1개의 좋아요
2

RowDefinition을 반대로 주시는게 원하시는 효과를 얻을 수 있겠네요

<Grid.RowDefinitions>
     <RowDefinition Height="*"/>
     <RowDefinition Height="4"/>
     <RowDefinition Height="*"/>
     <RowDefinition Height="4"/>
     <RowDefinition Height="*"/>          
     <RowDefinition Height="4"/>
      <RowDefinition Height="*"/>
</Grid.RowDefinitions>

안쪽의 이미지는 Padding 없이 채우신다면 원하는 효과가 보일듯 합니다

1개의 좋아요
3

정적인 UI 또는 칸 수가 적다면 Grid Row로 일일히(?) 처리 하셔도 좋은데

ItemsControl에 목록을 바인딩을 걸어서
ItemContainerStyle 에 스타일로 한방처리(?) 도 가능합니다.

2개의 좋아요
4

오! 네 감사합니다!
ItemsControl로 한번 찾아보겠습니다!

5

UniformGrid 쓰면 될 거 같은데요 Columns=“1” 걸어서 여백은 margin 걸고요

1개의 좋아요
6

UniformGrid도 적용해봤는데 Top, Bottom 끝 선에 맞지가 않더라구요…ㅠ