Drawing a seat area in wpf.Advice needed

Question

Hi,

New to wpf I am after some advice,pointers-articles-codesnippets that can help me to write a usercontrol containing a seating area

Lets say a cinema has 200 seats and it a square. I need to be able to draw 200 seats . What is the best way to draw seats?Would you draw 200 rectangles? Any suggestions

Answer 1

This will be done best with an ItemsControl, and yes, I would render each seat as a Rectangle so you can get all the mouse and selection events (since I imagine you want users to be able to select seats). If you want less overhead, you could step down to using rectangle geometries, but for 200 seats that are not moving, the overhead of a Rectangle will not be bad.

First, I would create some code-behind to store information about each seat. I am not sure what seat data you want in your model, but I think at the very least you would like to see a seat number. You could add other data such as an occupied or reserved status for the seat, but for now I have kept it simple:

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();
    }
}

Now for the XAML, you need to create an ItemsControl and set its ItemsSource to the seats collection. Then, using the ItemTemplate property, you can control how each seat will be rendered. In this case, it is simple: we will draw a single rectangle and overlay some text containing the number on top of the rectangle. Finally, we need the seats to be arranged in a square, so we set our ItemsPanel property to be a WrapPanel. This ensures that the seats will be arranged in rows. For the finishing touches, I have added a Trigger that will give seats a red glow when they are moused over. You can imagine many other triggers that would not be difficult to add.

<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>

With all of this, here is the resulting (super simple) seating chart:

Answer 2

Hello Charlie, I am also new to WPF and I am so glad that I found this guideline which is very similar to what i intend to develop in WPF. I want to ask you several questions about this cinema seating chart program: 1- How's the procedure to bind each seat to a field in a database? instead of binding it to an item in a list? 2- The seats have to have three "areas", left middle and right. and i need a column of seats to be empty between the left middle and right areas. Is the wrap panel in this case needed too? 3- How can we incline some seats on the front left and front right (\\----////)? I need specific datatemplates of inclined left and inclined right seats, right? 4-Another question: why button was not used in your example? Any specific reason?

If you could guide me through these questions i would be more than glad... thanks a lot. yarojan77