Рисование места в wpf

Question

Новичок в WPF. После нескольких советов, pointers-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>

При всем этом вот итоговая (очень простая) схема рассадки:

альтернативный текст http://img62.imageshack.us/img62/2944/seatingchartcontrol.png