在wpf中繪製座標區域

Question

對WPF不熟悉我在提供了一些建議後，可以幫助我編寫包含座位區域的用戶控件的指針 - 文章 - 代碼段。

可以說電影院有200個座位，它是一個正方形。 我需要能夠畫200個座位。 什麼是抽獎座位的最佳方式？你會畫200個矩形嗎？

Answer 1

這將最好的與ItemsControl做，是的，我會令每個座位爲Rectangle這樣你就可以得到所有的鼠標和選擇事件（因爲我想你希望用戶能夠選擇座位）。如果你想減少開銷，你可以下降到使用矩形幾何圖形，但對於200個不移動的座位，Rectangle的開銷不會太差。

首先，我會創建一些代碼隱藏來存儲有關每個座位的信息。我不確定您的模型中需要的座位數據，但我認爲至少您希望看到座位號。你可以添加其他數據如座位被佔用或保留的狀態，但現在我已經保持簡單：

public partial class SeatingArea : UserControl 
{ 
    public ObservableCollection<int> Seats { get; private set; } 

    public SeatingArea() 
    { 
     Seats = new ObservableCollection<int>(); 
     for (int i = 1; i <= 200; i++) 
      Seats.Add(i); 

     InitializeComponent(); 
    } 
} 

現在的XAML，你需要創建一個ItemsControl並設置其ItemsSource到座位採集。然後，使用ItemTemplate屬性，您可以控制每個座位的呈現方式。在這種情況下，很簡單：我們將繪製一個矩形，並在矩形頂部覆蓋包含數字的一些文本。最後，我們需要將座位安排在廣場上，因此我們將ItemsPanel屬性設置爲WrapPanel。這確保了座椅將排列成行。爲了收尾，我添加了一個Trigger，當他們被挖空時，座椅會發出紅光。你可以想象很多其他觸發器，不難添加。

<UserControl x:Class="TestWpfApplication.SeatingArea" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Background="Beige" 
DataContext="{Binding RelativeSource={RelativeSource Self}}"> 
<StackPanel> 
    <TextBlock HorizontalAlignment="Center" Text="SEATING CHART" FontSize="24" Margin="0,10"/> 
    <ItemsControl ItemsSource="{Binding Seats}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Rectangle x:Name="Seat" Width="25" Height="25" Stroke="Black" Fill="Green" Margin="1,2"/> 
        <TextBlock Text="{Binding}" TextAlignment="Center" VerticalAlignment="Center" 
          Foreground="White" FontWeight="Bold"/> 
       </Grid> 
       <DataTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Seat" Property="Effect"> 
          <Setter.Value> 
           <DropShadowEffect Color="Red" ShadowDepth="0"/> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </DataTemplate.Triggers> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel Height="300" Width="550"/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
</StackPanel> 

有了這一切，這裏是產生（超級簡單）座位圖：

alt text http://img62.imageshack.us/img62/2944/seatingchartcontrol.png