2012-02-20 63 views
1

我有一個表,它看起來相像,:有沒有辦法來繪製動態尺寸(拉伸)自定義表(網格)

enter image description here

首先,我不知道我怎樣才能使這種結構穩定,因爲我在通常的網格中發現的所有東西都是列和行,所以我需要一些「更智能」的表格元素。但也許我需要以某種方式創建它。也許有一些解決方案用於製作自定義結構化表格?

而主要的麻煩是使表格完全可拉伸(如圖片),所以表格必須變得更大,其中包含文字(字體)。我不知道目標平臺的分辨率,但它可能非常巨大,所以表格必須能夠像圖片一樣拉伸,但質量很好,我不希望在那裏看到大的像素(所以它必須像矢量圖片一樣可拉伸)。我怎麼能意識到它?

另外我還在想,如果WPF是正確的工具。也許使用Silverligh更容易,或者以某種方式將HTML應用到應用程序中,但是暫時我無法找到方法,我怎樣才能在任何地方實現它。所以我認爲我也必須用html和silver-light標記標記問題,但我想我會使用.net從數據庫中獲取我的數據。

回答

2

我花的最後一小時找到一個可靠的解決方案,但有沒有一個完美的。我停在這一點上搜索,但想告訴你,我現在的嘗試:

GridControl.cs

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Media; 

namespace WpfApplication1.CustomControl 
{ 
    public class GridControl : Grid 
    { 
     static GridControl() 
     { 
      DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl), 
                new FrameworkPropertyMetadata(typeof(GridControl))); 
     } 

     private Pen _linesPen; 

     #region Properties 

     public bool ShowCustomGridLines 
     { 
      get { return (bool) GetValue(ShowCustomGridLinesProperty); } 
      set { SetValue(ShowCustomGridLinesProperty, value); } 
     } 

     public static readonly DependencyProperty ShowCustomGridLinesProperty = 
      DependencyProperty.Register("ShowCustomGridLines", typeof (bool), typeof (GridControl), 
             new UIPropertyMetadata(false)); 


     public Brush GridLineBrush 
     { 
      get { return (Brush) GetValue(GridLineBrushProperty); } 
      set { SetValue(GridLineBrushProperty, value); } 
     } 

     public static readonly DependencyProperty GridLineBrushProperty = 
      DependencyProperty.Register("GridLineBrush", typeof (Brush), typeof (GridControl), 
             new UIPropertyMetadata(Brushes.Black)); 

     public double GridLineThickness 
     { 
      get { return (double) GetValue(GridLineThicknessProperty); } 
      set { SetValue(GridLineThicknessProperty, value); } 
     } 

     public static readonly DependencyProperty GridLineThicknessProperty = 
      DependencyProperty.Register("GridLineThickness", typeof (double), typeof (GridControl), 
             new UIPropertyMetadata(1.0)); 

     #endregion 

     protected override void OnRender(DrawingContext dc) 
     { 
      if (ShowCustomGridLines) 
      { 
       if (_linesPen == null) 
       { 
        _linesPen = new Pen(GridLineBrush, GridLineThickness); 
       } 

       foreach (var rowDefinition in RowDefinitions) 
       { 
        dc.DrawLine(_linesPen, new Point(0, rowDefinition.Offset), 
           new Point(ActualWidth, rowDefinition.Offset)); 
       } 

       foreach (var columnDefinition in ColumnDefinitions) 
       { 
        dc.DrawLine(_linesPen, new Point(columnDefinition.Offset, 0), 
           new Point(columnDefinition.Offset, ActualHeight)); 
       } 

       dc.DrawRectangle(Brushes.Transparent, _linesPen, 
           new Rect(0, 0, ActualWidth, ActualHeight)); 
      } 

      base.OnRender(dc); 
     } 
    } 
} 

使用的觀點:儘管所有你想實現併網發電/表結構背後的複雜性

<Window x:Class="WpfApplication1.table" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:CustomControl="clr-namespace:WpfApplication1.CustomControl" Title="table" Height="500" Width="600"> 
    <Grid> 
     <TextBlock Text="Headline" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" /> 

     <Slider x:Name="slider" Grid.Row="1" Minimum="1" Margin="20,30,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="200" /> 
     <TextBlock Text="Zoom" Margin="250,33,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" /> 

     <ScrollViewer x:Name="ScrollViewer" Margin="20,70,20,10" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 
      <CustomControl:GridControl ShowCustomGridLines="True" Width="{Binding ElementName=ScrollViewer, Path=ActualWidth}" Height="{Binding ElementName=ScrollViewer, Path=ActualHeight}"> 
       <Grid.LayoutTransform> 
        <ScaleTransform CenterX="0" CenterY="0" ScaleY="{Binding Path=Value, ElementName=slider}" ScaleX="{Binding Path=Value, ElementName=slider}" /> 
       </Grid.LayoutTransform> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="60" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 

       <TextBlock Grid.Column="0" Grid.Row="0" Text="Header 1" VerticalAlignment="Center" HorizontalAlignment="Center" /> 

       <TextBlock Grid.Column="1" Grid.Row="0" Text="Header 2" VerticalAlignment="Center" HorizontalAlignment="Center" /> 

       <CustomControl:GridControl ShowCustomGridLines="True" Grid.Column="2" Grid.Row="0"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 

        <!-- first row --> 
        <TextBlock Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Header 3 (over 3 columns)" /> 

        <!-- first column in second row --> 
        <TextBlock Grid.Column="0" Grid.Row="1" Text="Cell 1" HorizontalAlignment="Center" VerticalAlignment="Center" /> 

        <!-- second column in second row --> 
        <TextBlock Grid.Column="1" Grid.Row="1" Text="Cell 2" HorizontalAlignment="Center" VerticalAlignment="Center" /> 

        <!-- third column in second row --> 
        <TextBlock Grid.Column="2" Grid.Row="1" Text="Cell 3" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
       </CustomControl:GridControl> 

       <TextBlock Grid.Column="0" Grid.Row="1" Text="Cell 1 (big)" HorizontalAlignment="Center" VerticalAlignment="Center" /> 

       <CustomControl:GridControl Grid.Column="1" Grid.Row="1" ShowCustomGridLines="True"> 
        <Grid.RowDefinitions> 
         <RowDefinition /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 

        <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="0"> 
         <Grid.RowDefinitions> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
         </Grid.RowDefinitions> 
        </CustomControl:GridControl> 

        <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="1"> 
         <Grid.RowDefinitions> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
         </Grid.RowDefinitions> 
        </CustomControl:GridControl> 
       </CustomControl:GridControl> 

       <CustomControl:GridControl ShowCustomGridLines="True" Grid.Column="2" Grid.Row="1"> 
        <Grid.RowDefinitions> 
         <RowDefinition /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 

        <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="0"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition /> 
          <ColumnDefinition /> 
          <ColumnDefinition /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
         </Grid.RowDefinitions> 
        </CustomControl:GridControl> 

        <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="1"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition /> 
          <ColumnDefinition /> 
          <ColumnDefinition /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
         </Grid.RowDefinitions> 
        </CustomControl:GridControl> 
       </CustomControl:GridControl> 
      </CustomControl:GridControl> 
     </ScrollViewer> 
    </Grid> 
</Window> 
+0

此處的另一個任務是通過重新設置尺寸來使字體變大 – Cynede 2012-04-07 08:08:37

1

大多數人在面對不得不創建像這樣的複雜網格時,可能會購買第三方組件。特別是如果你不知道如何自己實現它!

嘗試環顧.NET組件廠商,如:

  • Syncfusion
  • Telerik的
  • Infragistics的
  • 開發快速
  • 組件的一個
  • Xceed

所有的網格都是功能豐富的。另外,如果您爲他們的產品付款,他們應該樂意提供支持。

+0

其中大部分價格高於我的工作價格:( – Cynede 2012-02-20 06:39:37

+0

問題是,這聽起來像你不知道如何實現 - 這是非常複雜的。創建網格是一個先進的WPF主題。只需要向客戶收取500美元的費用併購買網格,這比構建一個網格便宜! – ColinE 2012-02-20 06:42:01

+0

我認爲這個功能並不是我想要的,也許創建基於組件的ItemsControl會更容易,然後使用帶有付費功能的3D派對〜 500美元,但我不確定我是否可以將它完全拉伸。 – Cynede 2012-02-20 07:13:37

1

,回答你的問題很簡單。把所有東西都放在Viewbox中,它會正確拉伸。由於WPF基於矢量圖形,而不是像素,縮放將不成問題。

+0

謝謝,我想這就是我需要的可伸縮設計 – Cynede 2012-02-20 11:25:44

相關問題