1. 首頁
  2. 問答
  3. WPF樣式和網格佈局問題

WPF樣式和網格佈局問題

2012-02-13 157 views
0

已解決編輯： 因爲通過討論並不清楚，網格結構或它們的位置沒有什麼錯。然而，設計師歪曲了網格的位置。出於某種原因，它將網格放置在窗口的左上角，而不是在窗口的內容部分。一旦這是所有其他一切排列如預期。WPF樣式和網格佈局問題

我正在WPF項目上工作，並遇到了與我的表單造型有關的問題。我需要一個自定義窗口，一個沒有所有窗口的東西;所以我創建了一個可以應用於我所有窗口的自定義窗口樣式。在這種風格下，我創建了一個網格，以便我可以更輕鬆地放置默認窗口樣式的默認元素。然後在我的儀表板窗口上，我應用了默認的窗口樣式，並且所有外觀都很好。但是，一旦我嘗試在儀表板窗口內放置一個網格，事情就會開始變得詭異。 爲了彌補這一點，我添加了一個Adorner Decorator到默認樣式的網格中，並將其放置在該網格的內容位置。這允許我將我的內容放置在儀表板窗口中，但它不遵循儀表板網格所製作的網格規則。 所以我試圖做的是創建一個自定義窗口樣式，可以應用到我的所有窗口，並能夠使用網格切片指定滿足該窗口默認樣式的區域。

這是Windows風格的有意義的部分，它爲寄宿生（拖動標籤），頁眉，頁腳，控制欄按鈕（最大值，最小值，關閉）和內容設置了一個網格。

<Style x:Key="DefaultWindowStyle" TargetType="{x:Type Window}" > 
    <Setter Property="Margin" Value="5" /> 
    <Setter Property="ResizeMode" Value="NoResize" /> 
    <Setter Property="WindowStyle" Value="None" /> 
    <Setter Property="Background" Value="MidnightBlue" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Window}"> 
       <Grid Name="WindowGrid"> 
        <Grid.RowDefinitions> 
         <RowDefinition Name="TopBorderRow" Height="5" /> 
         <RowDefinition Name="TitleBarRow" Height="30" /> 
         <RowDefinition Name="RContentRow" Height="*" /> 
         <RowDefinition Name="BottomBorderRow" Height="5" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Name="LeftBorderCol" Width="5" /> 
         <ColumnDefinition Name="CContentCol" Width="*" /> 
         <ColumnDefinition Width="30" /> 
         <ColumnDefinition Width="30" /> 
         <ColumnDefinition Width="30" /> 
         <ColumnDefinition Name="RightBorderCol" Width="5" /> 
        </Grid.ColumnDefinitions> 

        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Top" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="6" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Width="5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Cursor="SizeWE" HorizontalAlignment="Left" VerticalAlignment="Stretch" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Width="5" Grid.Row="0" Grid.Column="5" Grid.RowSpan="4" Cursor="SizeWE" HorizontalAlignment="Right" VerticalAlignment="Stretch" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="0" Grid.Column="0" Cursor="SizeNWSE" HorizontalAlignment="Left" VerticalAlignment="Top" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="0" Grid.Column="5" Cursor="SizeNESW" HorizontalAlignment="Right" VerticalAlignment="Top" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="3" Grid.Column="0" Cursor="SizeNESW" HorizontalAlignment="Left" VerticalAlignment="Bottom" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="3" Grid.Column="5" Cursor="SizeNWSE" HorizontalAlignment="Right" VerticalAlignment="Bottom" /> 

        <s:DragLabel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Style="{DynamicResource DefaultWindowTitle}" Content="{TemplateBinding Title}"/> 

        <s:TitleBarButton x:Name="Minimize" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="2"> 
         <Image> 
          <Image.Style> 
           <Style TargetType="{x:Type Image}"> 
            <Setter Property="Source" Value="{DynamicResource ButtonMinimize}" /> 
            <Style.Triggers> 
             <Trigger Property="IsMouseOver" Value="True"> 
              <Setter Property="Source" Value="{DynamicResource ButtonMinimizeHover}"/> 
             </Trigger> 
            </Style.Triggers> 
           </Style> 
          </Image.Style> 
         </Image> 
        </s:TitleBarButton> 
        <s:TitleBarButton x:Name="Maximize" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="3"> 
         <Image> 
          <Image.Style> 
           <Style TargetType="{x:Type Image}"> 
            <Setter Property="Source" Value="{DynamicResource ButtonMaximize}" /> 
            <Style.Triggers> 
             <Trigger Property="IsMouseOver" Value="True"> 
              <Setter Property="Source" Value="{DynamicResource ButtonMaximizeHover}"/> 
             </Trigger> 
            </Style.Triggers> 
           </Style> 
          </Image.Style> 
         </Image> 
        </s:TitleBarButton> 
        <s:TitleBarButton x:Name="Close" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="4"> 
          <Image> 
           <Image.Style> 
            <Style TargetType="{x:Type Image}"> 
             <Setter Property="Source" Value="{DynamicResource ButtonClose}" /> 
             <Style.Triggers> 
              <Trigger Property="IsMouseOver" Value="True"> 
               <Setter Property="Source" Value="{DynamicResource ButtonCloseHover}"/> 
              </Trigger> 
             </Style.Triggers> 
            </Style> 
           </Image.Style> 
          </Image> 
        </s:TitleBarButton> 

        <AdornerDecorator Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="4"> 
         <ContentPresenter /> 
        </AdornerDecorator> 

       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

而這裏就是我試圖把在正確的格槽裝元素（那些由儀表盤窗口中創建）的儀表盤窗口的代碼。網格造成的打擊看起來好像所有的行和列都在正確的位置，並且它們的元素應該簡單地適合，但是它們具有奇怪的邊緣。因此，StudySessionPanel（128x234）應該完全適合第1行第2列，但正如您所看到的，它需要colsaps，邊距和其他垃圾，才能將其放置在正確的位置。

Title="Dashboard" 
    Style="{DynamicResource DefaultWindowStyle}" mc:Ignorable="d" 
    Height="840" Width="1024"> 

    <Grid Name="DashboardGrid" Width="1024" Height="840"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="63" /> 
      <RowDefinition Height="128" /> 
      <RowDefinition Height="234" /> 
      <RowDefinition Height="18"/> 
      <RowDefinition Height="380" /> 
      <RowDefinition Height="16" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="16" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="234" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="280" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="417" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="16" /> 
     </Grid.ColumnDefinitions> 

     <cc:PanelStudySession x:Name="StudySessionPanel" Grid.ColumnSpan="3" Margin="15,66,16,62" Grid.RowSpan="2" Grid.Row="1"> 
     </cc:PanelStudySession> 

     <cc:PanelPerformance x:Name="PerformancePanel" Grid.Column="3" Grid.ColumnSpan="4" Margin="0,66,10,62" Grid.Row="1" Grid.RowSpan="2"> 
     </cc:PanelPerformance> 

     <cc:PanelProgress x:Name="ProgressPanel" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,190,10,62" Grid.Row="2" Grid.RowSpan="3"> 
     </cc:PanelProgress> 

     <cc:PanelHistory x:Name="HistoryPanel" Grid.Column="5" Grid.ColumnSpan="2" Margin="0,190,15,62" Grid.Row="2" Grid.RowSpan="3">  
     </cc:PanelHistory> 

    </Grid>

這與邊緣的圖像，以及行/列跨越 How it looks with margins

How it looks without margins

忽略設計元素進行排序的排隊，儘管其中一些得到切碎。在演講者中運行時看起來是一樣的。

Placement when ignoring designer

來源

2012-02-13 Siegeon

+0

問題是？ – 2012-02-13 19:30:44

+0

對不起，我不是更清楚。從放置中可以看出，雖然它應該在指定的單元格中，但它不是，所以對於上面的例子，我將它放到了一個給它一個奇怪設置的地方。 – Siegeon 2012-02-13 19:56:55

+0

您的示例中充滿了對您的自定義代碼的引用，這意味着其他人無法在Visual Studio中輕鬆檢查您的xaml。您應該提供一個僅使用默認WPF控件的示例。 – 2012-02-13 22:45:42

回答

1

你StudySessionPanel實際上被置於行1-2（行= 1，ROWSPAN = 2）和列0-2（沒有列和ColumnSpan = 3）。只要設置Grid.Row和Grid.Column如果你想把它放在一個單元格中。

來源

2012-02-13 19:38:02 RandomEngy

+0

是的，這是主要問題，如果我將它設置爲其特定的行/列它甚至不關閉正確的位置。 – Siegeon 2012-02-13 19:57:46

+0

那麼，當你設置特定的行/列時究竟發生了什麼錯誤？ – RandomEngy 2012-02-13 20:52:57

+0

查看附加圖片 – Siegeon 2012-02-13 22:31:31

相關問題

 相關問題