Question

WPF的新手我接受了一些建议，指针 - articles-codesnippets可以帮助我编写一个包含休息区的用户控件。

让我们说电影院有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

在wpf中绘制一个座位区域

1 个答案: