对话框的设计

时间:2018-10-31 06:02:38

标签: c# wpf xaml

我正在尝试在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>

通过下面的xaml代码制作了我的agentHintControl.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 :(我要实现的目标) This is the image i want to get

图片2 :(我得到的)

enter image description here

现在,如在图2中可以看到的,我的问题是我进入了很多空白。我的意思是,对话框应根据对话框上的内容调整其大小。但是在图像2中,空格太多。在我的Windows中,我正在使用 SizeToContent =“ HeightandWidth” 。可以调整宽度,但不能调整高度。

期待您的帮助。

1 个答案:

答案 0 :(得分:0)

乍看之下有几个问题,我在评论中提到了<root> <div id="node_1">a b</div> <div id="node_2">c</div> </root> 属性,而您的验证网格位于Grid.Row="2"中,因此StackPanel属性并不相关。我也不确定您的矩形会做什么-它们是背景色吗?

但是,无论如何,您的网格定义看起来比实际的网格更复杂。试试:

Grid.Column

对于xaml调试,我倾向于将鲜艳的颜色添加到背景中,并包括border属性,以便可以准确地看到控件的位置。