2012-02-13 11 views
0

解決済みの編集: グリッドの配置や配置には何の問題もありませんでした。しかしデザイナーはグリッドがどこにあるのかを誤って伝えました。なんらかの理由で、ウィンドウのコンテンツ部分内ではなく、ウィンドウの左上隅にグリッドを配置しました。それが予想されたように並んだすべてのものを考慮すればWPFスタイルとグリッドレイアウトの問題

私はWPFプロジェクトに取り組んでおり、自分のフォームのスタイリングに問題がありました。私はカスタムウィンドウが必要でした。私はすべての自分のウィンドウに適用できるカスタムウィンドウスタイルを作成しました。そのスタイルでは、グリッドを作成して、デフォルトのウィンドウスタイルのデフォルト要素をより簡単に配置できるようにしました。次に、ダッシュボードのウィンドウで、デフォルトのウィンドウスタイルを適用し、すべてがうまく見えます。しかし、一度ダッシュボードウィンドウ内にグリッドを配置しようとすると、物事がうねり始める。 これを補うために、Adorner Decoratorを既定のスタイルでグリッドに追加し、そのグリッドのコンテンツの場所に配置しました。これにより、コンテンツをダッシュ​​ボードウィンドウ内に配置することはできますが、ダッシュボードグリッドによって作成されたグリッドルールには従いません。 私がしようとしているのは、すべてのウィンドウに適用可能なカスタムウィンドウスタイルを作成し、グリッドを使用してそのウィンドウのデフォルトスタイルに合わせた領域をスライスすることができるようにすることです。

これは、境界線(ドラッグラベル)、ヘッダー、フッター、コントロールバーのボタン(最大、最小、近く)と内容のグリッドをレイアウトするウィンドウスタイルの重要な部分です。

<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列目に完全に収まるはずですが、正しい場所に配置するには、コラップス、マージン、その他の迷惑メールが必要です。

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> 

これはマージンを持つ画像であり、それらのいくつかはみじん切りますけれども行/ colが、 How it looks with margins

要素がソートのラインアップデザイナーを無視

How it looks without margins

にまたがります。それは発表者と同じように見えます。

Placement when ignoring designer

+0

質問は? –

+0

申し訳ありません私ははっきりしていませんでした。配置によってわかるように、それは指定されたセル内にあるべきですが、そうではありません。したがって、上記の例では、それを奇妙な設定にした場所にドラッグします。 – Siegeon

+0

あなたの例はカスタムコードへの参照でいっぱいです。つまり、他の人がVisual Studioでxamlを簡単にチェックできないということです。既定のWPFコントロールのみを使用する例を提供する必要があります。 –

答えて

1

あなたStudySessionPanelが実際に行1-2(行= 1、ROWSPAN = 2)及び列0-2(NOカラムとColumnSpan = 3)に配置されています。セルに入れる場合は、Grid.RowGrid.Columnと設定してください。

+0

はい、それは私の特定の行/列にも正しい場所を閉じることはありませんそれを設定する場合の主な問題です。 – Siegeon

+0

特定の行/列を設定すると、正確に何が間違っていましたか? – RandomEngy

+0

添付の画像を参照 – Siegeon