none
화면 design 관련 질문 RRS feed

  • 질문

  • 안녕하세요.

    아래 사진과 같이 화면을 design했습니다.

    위의 화면을 실행시켜봤더니 아래와 같이 화면이 찌그러져 나오는데, 어떻게 하면 될까요?


    지적 부탁드립니다.

    • 편집됨 ohseihyung 2020년 12월 3일 목요일 오후 1:18
    2020년 12월 3일 목요일 오후 1:17

답변

  • 해당 이슈는 Button을 설정한 Margin 속성으로 인해 발생하였을 수 있습니다. UI 레이아웃의 경우 Margin 조정 컨트롤을 직접 사용하지 않는 것이 좋습니다. 
    Grid의 특정 열과 행에 컨트롤을 넣은 다음 Margin을 사용하여 약간 조정할 수 있습니다.
    제가 Grid의 Column과 Row을 사용하여 동일한 컨트롤을 호스팅하고 실행하였는데 말씀하신 문제가 나타나지 않습니다. 다음 코드를 참조하시기 바랍니다.

    <Grid Background="Azure">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="1.3*"></ColumnDefinition>
                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="Produce Code" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <ComboBox Grid.Row="0" Grid.Column="1" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></ComboBox>
                <TextBlock Grid.Row="1" Grid.Column="0" Text="Lender" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="1" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <TextBlock Grid.Row="2" Grid.Column="0" Text="Loan Amount" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="2" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <TextBlock Grid.Row="3" Grid.Column="0" Text="APR" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="3" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <TextBlock Grid.Row="4" Grid.Column="0" Text="Terms" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="4" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <Button Grid.Row="5" Grid.Column="1" Content="GET PAYMENT" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
    
                <TextBlock Grid.Row="0" Grid.Column="3" FontSize="20" FontWeight="Bold" Text="Review Your Details" HorizontalAlignment="Left" VerticalAlignment="Center" ></TextBlock>
                <RichTextBox  Grid.Row="1"  Grid.Column="3" Grid.RowSpan="4" Width="250" Height="200"  HorizontalAlignment="Left" VerticalAlignment="Top"></RichTextBox>
                <Grid Grid.Row="5" Grid.Column="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Content="Save" Width="110" Height="30"></Button>
                <Button Grid.Column="1" Content="Export" Width="110" Height="30"></Button>
                <Button Grid.Column="2" Content="Back" Width="110" Height="30"></Button>
                </Grid>
    
        </Grid>

    MSDN Community Support Ricky

    다른 커뮤니티 멤버에게 도움이 될 수 있게 문제를 해결 한 답변을 '답변으로 표시'를 클릭하시고 그렇지 않은 경우 '답변으로 표시 취소'를 클릭하시기 바랍니다. MSDN 서포트에 대한 의견이나 불만이 있을 경우 MSDNFSF@microsoft.com 으로 연락하시기 바랍니다.


    2020년 12월 7일 월요일 오전 6:16
    중재자

모든 응답

  • 안녕하세요

    어떤 프로젝트를 사용하고 있는가요?(WPF, Winforms...)

    MSDN Community Support Ricky

    다른 커뮤니티 멤버에게 도움이 될 수 있게 문제를 해결 한 답변을 '답변으로 표시'를 클릭하시고 그렇지 않은 경우 '답변으로 표시 취소'를 클릭하시기 바랍니다. MSDN 서포트에 대한 의견이나 불만이 있을 경우 MSDNFSF@microsoft.com 으로 연락하시기 바랍니다.

    2020년 12월 4일 금요일 오전 3:07
    중재자
  • WPF 프로젝트입니다.
    2020년 12월 4일 금요일 오전 6:42
  • 해당 이슈는 Button을 설정한 Margin 속성으로 인해 발생하였을 수 있습니다. UI 레이아웃의 경우 Margin 조정 컨트롤을 직접 사용하지 않는 것이 좋습니다. 
    Grid의 특정 열과 행에 컨트롤을 넣은 다음 Margin을 사용하여 약간 조정할 수 있습니다.
    제가 Grid의 Column과 Row을 사용하여 동일한 컨트롤을 호스팅하고 실행하였는데 말씀하신 문제가 나타나지 않습니다. 다음 코드를 참조하시기 바랍니다.

    <Grid Background="Azure">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="1.3*"></ColumnDefinition>
                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="Produce Code" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <ComboBox Grid.Row="0" Grid.Column="1" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></ComboBox>
                <TextBlock Grid.Row="1" Grid.Column="0" Text="Lender" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="1" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <TextBlock Grid.Row="2" Grid.Column="0" Text="Loan Amount" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="2" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <TextBlock Grid.Row="3" Grid.Column="0" Text="APR" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="3" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <TextBlock Grid.Row="4" Grid.Column="0" Text="Terms" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBox Grid.Row="4" Grid.Column="1" Text="" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBox>
                <Button Grid.Row="5" Grid.Column="1" Content="GET PAYMENT" Width="120" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
    
                <TextBlock Grid.Row="0" Grid.Column="3" FontSize="20" FontWeight="Bold" Text="Review Your Details" HorizontalAlignment="Left" VerticalAlignment="Center" ></TextBlock>
                <RichTextBox  Grid.Row="1"  Grid.Column="3" Grid.RowSpan="4" Width="250" Height="200"  HorizontalAlignment="Left" VerticalAlignment="Top"></RichTextBox>
                <Grid Grid.Row="5" Grid.Column="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Content="Save" Width="110" Height="30"></Button>
                <Button Grid.Column="1" Content="Export" Width="110" Height="30"></Button>
                <Button Grid.Column="2" Content="Back" Width="110" Height="30"></Button>
                </Grid>
    
        </Grid>

    MSDN Community Support Ricky

    다른 커뮤니티 멤버에게 도움이 될 수 있게 문제를 해결 한 답변을 '답변으로 표시'를 클릭하시고 그렇지 않은 경우 '답변으로 표시 취소'를 클릭하시기 바랍니다. MSDN 서포트에 대한 의견이나 불만이 있을 경우 MSDNFSF@microsoft.com 으로 연락하시기 바랍니다.


    2020년 12월 7일 월요일 오전 6:16
    중재자