2013-10-03 2 views
3

Я исхожу из фона WinForms и начинаю изучать WPF. Я прошел через набор учебных пособий в Pluralsight, но мне трудно справиться с изменением размера.Dock and Anchor в WPF

При изменении размера мои текстовые поля, похоже, не «закрепляются» так, как хотелось бы. Я включаю в себя xaml ниже с заметками в нем о поведении, которое я ищу. Любая обратная связь относительно передовой практики будет очень оценена. Код просто «чувствует» немного неудобно для меня, но я не уверен, что это потому, что это просто для меня ново, или если есть более простые/лучшие способы делать то, что я пытаюсь.

Чтобы получить представление о том, как выглядят вещи, не загружая XAML ниже - вот до и после изменения размера скриншотов. Before Resize http://dboasis.com/screenshots/beforeresize.jpg After Resize http://dboasis.com/screenshots/afterresize.jpg

Я надеюсь, что для предложений и как обрабатывать проблемы изменения размеров, а также лучшие практики после того, видя, как я попытался сделать это в XAML.

Также - xaml реализует элементы управления DevExpress - если кто-то хочет, чтобы я изменил форму и не использовал сторонние элементы управления, поэтому они с большей легкостью вносят предложения, я счастлив сделать это.

<dx:DXWindow 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" x:Class="DXTemplateSandbox.MainWindow" 
    Title="MainWindow" Height="437" Width="641"> 
<Grid> 
    <dx:DXTabControl x:Name="tabcntMainTab"> 
     <dx:DXTabItem x:Name="tabUserList" Header="User List"> 
      <Grid Background="Transparent"> 

       <Grid.RowDefinitions> 
        <RowDefinition x:Name="SelectLabel" Height="30" /> 
        <RowDefinition x:Name="OpenDataFile" Height="34" /> 
        <RowDefinition x:Name="DataGridLayoutRow" Height="185*" /> 
        <RowDefinition x:Name="AppPrefsInfo" Height="110" /> 
       </Grid.RowDefinitions> 
       <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="10,0"> 
        <!-- 
        The DataFileLocation not resizing the width. How do I instead lock the vertical size, but allow width to 
        resize with form? 
        --> 
        <TextBox Name="DataFileLocation" Width="419" Margin="0,5" HorizontalAlignment="Stretch" /> 

        <!-- 
        How do I get the SelectData button stay immediately to the right of the DatFileLocation textbox when resizing? 
        --> 
        <Button Name="SelectData" Content="..." Width="40" Margin="5" Click="SelectData_Click"/> 
        <DockPanel> 
         <!-- I would like the "Go" button to stay anchored to the right when resizing. --> 
         <Button x:Name="GoButton" 
           Content="Go" 
           Width="66" 
           DockPanel.Dock="Right" 
           HorizontalAlignment="Right" 
           VerticalAlignment="Top" 
           Margin="50,5,5,5" 
           Click="GoButton_Click" /> 
        </DockPanel> 

       </StackPanel> 

       <!-- 
       --> 
       <dxg:GridControl Grid.Row="2" Margin="5" > 
        <dxg:GridControl.View> 
         <dxg:TableView ShowGroupPanel="False"/> 
        </dxg:GridControl.View> 
       </dxg:GridControl> 

       <Label Content="Select Data File" HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Top" Height="26" Grid.RowSpan="2" Width="91"/> 

       <!-- 
       Is using a grid inside a parent grid cell the best way of doing this? I'm using stackpanels in each of the rows in the 
       child grid. Is there a better way of doing this? 
       --> 
       <Grid x:Name="AppPrefsGrid" Grid.Row="3" > 
        <Grid.RowDefinitions> 
         <RowDefinition/> 
         <RowDefinition/> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <!-- 
        Ideally I would like the text boxes to grow and shrink at the same rate as form is resized, and leave the labels the same width. I don't know 
        if this is practical however. 
        --> 
        <StackPanel Grid.Row="0" Orientation="Horizontal"> 
         <Label Content="Registration Name:" Width="112" Margin="5"/> 
         <TextBox Name="RegNameTextBox" Width="175" Margin="5" IsEnabled="False"/> 
         <Label Content="Install Date:" Width="84" Margin="10,5,5,5"/> 
         <TextBox Name="InstallDateTextBox" Width="175" Margin="5" IsEnabled="False"/> 
        </StackPanel> 
        <StackPanel Grid.Row="1" Orientation="Horizontal"> 
         <Label Content="Registration Number:" Width="112" Margin="5"/> 
         <TextBox Name="RegNumberTextBox" Width="175" Margin="5" IsEnabled="False"/> 
         <Label Content="Data File Version:" Width="84" Margin="10,5,5,5"/> 
         <TextBox Name="DataVersionTextBox" Width="175" Margin="5" IsEnabled="False"/> 
        </StackPanel> 
        <StackPanel Grid.Row="2" Orientation="Horizontal"> 
         <Label Content="Edition Code:" Width="112" Margin="5"/> 
         <TextBox Name="EditionCodeTextBox" Width="175" Margin="5" IsEnabled="False"/> 
         <Label Content="User Count:" Width="84" Margin="10,5,5,5"/> 
         <TextBox Name="UserCountTextBox" Width="175" Margin="5" IsEnabled="False"/> 
        </StackPanel> 


       </Grid> 

      </Grid> 

     </dx:DXTabItem> 
     <dx:DXTabItem x:Name="tabKeyGen" Header="Key Generator"/> 
    </dx:DXTabControl> 
</Grid> 

+4

Если вы новичок в WPF из WinForms, я бы настоятельно рекомендовал проверить эту статью: [WPF Layouts - Visual Quick Start] (http://www.codeproject.com/Articles/30904/WPF-Layouts- A-Визуально-Quick-Start). Это должно помочь вам лучше понять систему компоновки WPF :). Но похоже, что вы хотите разместить свои элементы управления в «Grid» с шириной столбцов «Label», установленной на статическое число, а ширина столбцов содержимого равна « * ', поэтому он растягивается, чтобы заполнить все оставшееся пространство. – Rachel

+3

Совет. Не используйте конструктор Visual Studio, он создает фиксированный размер, фиксированную позицию, которая не работает при изменении размера окна или в разных разрешениях. –

+0

HighCore: Я делаю вещи в xaml по большей части, но использовал немного перетаскивания, чтобы получить элементы управления в форме. Так как я нахожусь здесь на кривой обучения, полезно использовать конструктор VS в качестве отправной точки, чтобы получить представление о том, где в xaml добавить вещи и синтаксис свойств. Существуют ли какие-либо конкретные «gotchas», которые я должен отслеживать, если вы используете конструктор в Visual Studio? – Matt

ответ

5

У вас есть несколько проблем здесь, которые кажутся, потому что вы не используете правильную панель макета для управления.

По умолчанию размер элемента управления основан на поведении родителя.

Например, предметы, расположенные внутри Grid, будут растягиваться, чтобы заполнить все пространство, предоставленное им внутри сетки. Если определение Grid Row/Column имеет значение Height/Width, равное Auto, это означает, что он будет рисовать элемент управления в любом размере, который хочет контролировать. Если он установлен на фиксированный размер, такой как 100, тогда он будет рисовать элемент управления такого размера. Если он установлен в размере *, он будет рисовать элемент управления, используя процент оставшегося пространства.

Такое поведение может быть переопределен свойствами на самом элементе управления, такие как HorizontalAlignment и VerticalAlignment или настройки свойств, таких как Height, Width и Margin.

Итак, чтобы устранить некоторые из ваших конкретных проблем, начните с удаления этих панелей стека, содержащих ваши комбинации меток/текстовых полей, и замените их соответствующим 3x4 Grid. Поместите свои метки в столбцы 0 и 2 и укажите ColumnDefinition фиксированный размер. Поместите свои текстовые поля в столбцы 1 и 3 и оставьте их как размер *. Помните, что размер * - это процент, поэтому 2 * в одном столбце и 3 * в другом столбце будут означать, что доступно 5*, а столбец 1 займет 2/5 места, а столбец2 займет 3/5 космос.

Чтобы изменить размер вашего DataFileLocation, измените его размер, просто удалите свойство Width и пусть оно будет размером до любого размера ячейки сетки.

Чтобы получить кнопку SelectData, чтобы оставаться на стыке справа от текстового поля SelectData, поместите как в DockPanel. Подсоедините кнопку к правой стороне и разрешите TextBox заполнять все оставшееся пространство. Вам нужно будет установить TabIndex, если вы хотите, чтобы ключ табуляции проходил через них, как ожидалось.

<DockPanel> 
    <Button DockPanel.Dock="Right" ... /> 
    <TextBox ... /> 
</DockPanel> 

Начните с этого и посмотрите, как это выглядит. Ваше RowDefinition для вашей родительской сетки выглядит корректно (кроме того, что ваша высота 3-й строки должна быть "*", а не "184*"), и это должно означать, что ваш элемент управления DevExpress должен растягиваться/сжиматься, чтобы заполнить все оставшееся вертикальное пространство.

Смежные вопросы