Дизайн диалогового окна

Question

Я пытаюсь создать диалоговое окно в WPF (аналогично изображению 1). Я использую приведенный ниже код на главной странице диалога,

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

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>

    </Grid.ColumnDefinitions>
    <Rectangle Grid.Row="2" Fill="#ebebeb"></Rectangle>
    <Rectangle Grid.Column="0" Fill="#ebebeb"></Rectangle>
    <StackPanel Grid.Column="0" Margin="20">
        <VPASDC:AgentHintControl x:Name="agentHintControl" Margin="0 0 0 10"/>
    </StackPanel>
    <StackPanel Grid.Column="1" Margin="20">

        <VPASDC:AgentScriptControl x:Name="agentScriptControl" Margin="0 0 0 10"/>
        <VPASDC:AgentQuestionControl x:Name="agentQuestionControl" Margin="0 0 0 10"/>
        <Grid Grid.Row="0" Margin="0,0,0,0" x:Name="ValidationGrid" Visibility="Collapsed">
            <Image Grid.Column="0" Source="/AgentScripting;component/Images/baseline-error-24px.png" Height="20px" Width="20px" HorizontalAlignment="Left"/>
            <TextBlock Style="{DynamicResource AgentScriptDialogValidatiorErrorTextBlockStyle}" Margin="25 0 0 0" x:Name="tbValidationErrorMessage" >
                Invalid Entry. Card Last 4 digits Must be Numeric</TextBlock>
        </Grid>
    </StackPanel>



    <Grid Grid.Row="1" Margin="19.8,9.6,20.4,-9.6" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Button x:Name="OkButton" Grid.Column="0" Style="{DynamicResource AgentScriptingDialogButtons}" Margin="0 0 30 0" Click="OkButton_Click">
            <TextBlock Text="OK" />
        </Button>
        <Button x:Name="NextButton" Grid.Column="1"  Style="{DynamicResource AgentScriptingDialogButtons}" Margin="30 0 00 0" Click="NextButton_Click" >
            <TextBlock Text="NEXT"  />
        </Button>
    </Grid>


</Grid>

А внутри моей страницы agentHintControl.xaml, которая является областью подсказок с левой стороны изображения, выполняется код ниже xaml.

<Grid  Background="#ebebeb">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="55"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition ></RowDefinition>
    </Grid.RowDefinitions>
    <!--Source="/AgentScripting;component/Images/ikon01.png"-->
    <Image Grid.Column="0" 
           Source="C:\Projects\AgentScripting_30102018\AgentScripting\AgentScripting\Images\TIPIcon.png"
           Height="auto"
           Width="auto"
           Stretch="Fill"
           VerticalAlignment="Center"/>
    <TextBlock Grid.Column="1"  Grid.Row="0" Height="Auto"
               Margin="10 0 0 0"
               FontFamily="Segoe UI Bold" FontSize="18"
               Text="TIP" />
    <TextBlock Grid.ColumnSpan="2" Grid.Row="1" Height="Auto"
               Margin="10 0 0 0"
               Style="{DynamicResource AgentScriptDialogHintTextBlockStyle}" 
               Text="Get information for suspicious transactions from customer" x:Name="txtAgentHint"/>
</Grid>

Изображение 1: (Чего я хочу достичь)

Изображение 2: (что я получаю)

Теперь, как видно на рисунке 2, моя проблема в том, что я получаю много пробелов. Я имею в виду, что диалог должен регулировать его размер в соответствии с содержимым в диалоге. Но на изображении 2 слишком много пробелов. В моей Windows я использую SizeToContent = "HeightandWidth" . Он корректирует ширину, но не высоту.

С нетерпением жду вашей помощи.

Answer 1

На первый взгляд существует пара проблем: атрибут Grid.Row="2", о котором я упоминал в комментариях, и ваша сетка проверки имеет значение StackPanel, поэтому атрибут Grid.Column не имеет значения. Я также не уверен, что ваши прямоугольники делают - они для фона цвета?

В любом случае, однако, ваши определения сетки выглядят более сложными, чем на самом деле. Попробуйте:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>

  <Rectangle Grid.Column="0" Grid.Row="0" Fill="#ebebeb"></Rectangle>  <!-- maybe remove this and provide a `Background` attribute for the StackPanel below -->
  <StackPanel Grid.Column="0" Margin="20">
    <VPASDC:AgentHintControl x:Name="agentHintControl" Margin="0 0 0 10"/>
  </StackPanel>

  <Grid Grid.Column="1">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Margin="20">
      <VPASDC:AgentScriptControl x:Name="agentScriptControl" Margin="0 0 0 10"/>
      <VPASDC:AgentQuestionControl x:Name="agentQuestionControl" Margin="0 0 0 10"/>
      <Grid Margin="0,0,0,0" x:Name="ValidationGrid" Visibility="Collapsed">
        <Image Grid.Column="0" Source="/AgentScripting;component/Images/baseline-error-24px.png" Height="20px" Width="20px" HorizontalAlignment="Left"/>
        <TextBlock Style="{DynamicResource AgentScriptDialogValidatiorErrorTextBlockStyle}" Margin="25 0 0 0" x:Name="tbValidationErrorMessage">
            Invalid Entry. Card Last 4 digits Must be Numeric
        </TextBlock>
      </Grid>
    </StackPanel>

    <Grid Grid.Row="1" Grid.Column="1" Margin="19.8,9.6,20.4,-9.6" >
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>

      <Button x:Name="OkButton" Grid.Column="0" Style="{DynamicResource AgentScriptingDialogButtons}" Margin="0 0 30 0" Click="OkButton_Click">
        <TextBlock Text="OK" />
      </Button>
      <Button x:Name="NextButton" Grid.Column="1"  Style="{DynamicResource AgentScriptingDialogButtons}" Margin="30 0 00 0" Click="NextButton_Click" >
        <TextBlock Text="NEXT"  />
      </Button>
    </Grid>
  </Grid>
<Grid>

Для отладки xaml я обычно добавляю яркие цвета к фонам и включаю атрибуты границ, чтобы точно видеть, где находятся элементы управления.