在工作过程中,控件的布局也有举足轻重的作用,后台逻辑代码对于用户体验并不是那么明显,然而看人先看装,ui带给用户的第一印象却很直观。以下是我工作过程中遇到较多的页面设计问题:
1.调整对齐方式:虽然通过调整maigin的大小也可以实现对齐效果,但是通过margin来调节对齐有可能牵一发而动全身,而且维护也很费劲,不是很合理。个人认为,这样的方法可以进行改进,可以先从大局出发。下面以grid为例,首先将grid的留白设计好,这样grid下的控件就不需要再次设置留白,分列分行时将高度,宽度和对齐方式设置好以后,行与行或列与列之间就不需要设置留白了。以下是一个例子:
<Grid Margin="20,15,20,10">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<TextBlock Text="TextBlock" Width="80" VerticalAlignment="Center" />
<ComboBox Name="cmbAdapterType" Height="25" Width="200" DisplayMemberPath="AdapterTypeName" SelectedIndex="0" />
</WrapPanel>
<WrapPanel Grid.Row="1" VerticalAlignment="Bottom">
<TextBlock Text="TextBlock" Width="80" VerticalAlignment="Center" />
<TextBox Text="SWTCPSS" Name="txtAdapterName" IsReadOnly="True" Height="25" Width="200" />
</WrapPanel>
<WrapPanel Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Name="btnOK" Content="确定" Height="25" Width="75" Margin="0,0,10,0" Click="btnOK_Click" />
<Button Name="btnCancel" Content="取消" Height="25" Width="75" Click="btnCancel_Click" />
</WrapPanel>
</Grid>
2.对于大量的控件布局问题:如果页面控件数量较多,那么可以通过折叠来对控件进行布局。
如果大家在页面设计方面有更多的心得体会,欢迎交流。
1.调整对齐方式:虽然通过调整maigin的大小也可以实现对齐效果,但是通过margin来调节对齐有可能牵一发而动全身,而且维护也很费劲,不是很合理。个人认为,这样的方法可以进行改进,可以先从大局出发。下面以grid为例,首先将grid的留白设计好,这样grid下的控件就不需要再次设置留白,分列分行时将高度,宽度和对齐方式设置好以后,行与行或列与列之间就不需要设置留白了。以下是一个例子:
<Grid Margin="20,15,20,10">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<TextBlock Text="TextBlock" Width="80" VerticalAlignment="Center" />
<ComboBox Name="cmbAdapterType" Height="25" Width="200" DisplayMemberPath="AdapterTypeName" SelectedIndex="0" />
</WrapPanel>
<WrapPanel Grid.Row="1" VerticalAlignment="Bottom">
<TextBlock Text="TextBlock" Width="80" VerticalAlignment="Center" />
<TextBox Text="SWTCPSS" Name="txtAdapterName" IsReadOnly="True" Height="25" Width="200" />
</WrapPanel>
<WrapPanel Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Name="btnOK" Content="确定" Height="25" Width="75" Margin="0,0,10,0" Click="btnOK_Click" />
<Button Name="btnCancel" Content="取消" Height="25" Width="75" Click="btnCancel_Click" />
</WrapPanel>
</Grid>
2.对于大量的控件布局问题:如果页面控件数量较多,那么可以通过折叠来对控件进行布局。
如果大家在页面设计方面有更多的心得体会,欢迎交流。