XAML: Designing the UI with XAML

For the XAML UI part of the project, we’ll create a simple interface with an image of an animal, a label to display statements, and four buttons for the actions: Eat, Sleep, Run, and Play. When a button is pressed, the label will update with a statement reflecting the animal’s action. This example assumes you’ve already set up a WPF App (.NET) project in Visual Studio named AnimalUI.

Step 1: Designing the UI with XAML

Open the MainWindow.xaml file in your project. This file contains the XAML used to design your application’s interface. Replace its content with the following XAML code to create the UI:

<Window x:Class="AnimalUI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Animal Simulator" Height="350" Width="525">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Image Placeholder -->
        <Image Grid.Row="0" Source="YourImagePathHere" Height="100" Margin="0,0,0,10"/>

        <!-- Label to display action statements -->
        <Label x:Name="lblActionStatement" Grid.Row="1" Content="Click a button to see the animal action" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>

        <!-- Buttons for actions -->
        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button x:Name="btnEat" Content="Eat" Margin="5" Click="btnEat_Click"/>
            <Button x:Name="btnSleep" Content="Sleep" Margin="5" Click="btnSleep_Click"/>
            <Button x:Name="btnRun" Content="Run" Margin="5" Click="btnRun_Click"/>
            <Button x:Name="btnPlay" Content="Play" Margin="5" Click="btnPlay_Click"/>
        </StackPanel>
    </Grid>
</Window>

In the Image element, replace "YourImagePathHere" with the actual path to your animal image.

Step 2: Adding Code Behind

Next, you’ll need to add functionality to the buttons. Open MainWindow.xaml.cs and replace its content with the following C# code:

using System.Windows;

// Make sure to add this using directive if you've already referenced the AnimalActions DLL
// using AnimalActions;

namespace AnimalUI
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        // Event handler for the "Eat" button
        private void btnEat_Click(object sender, RoutedEventArgs e)
        {
            // Placeholder for actual method call from DLL
            lblActionStatement.Content = "The animal is eating.";
        }

        // Event handler for the "Sleep" button
        private void btnSleep_Click(object sender, RoutedEventArgs e)
        {
            // Placeholder for actual method call from DLL
            lblActionStatement.Content = "The animal is sleeping.";
        }

        // Event handler for the "Run" button
        private void btnRun_Click(object sender, RoutedEventArgs e)
        {
            // Placeholder for actual method call from DLL
            lblActionStatement.Content = "The animal is running.";
        }

        // Event handler for the "Play" button
        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            // Placeholder for actual method call from DLL
            lblActionStatement.Content = "The animal is playing.";
        }
    }
}

Step 3: Integrating the DLL

After the DLL teams have shared their AnimalActions.dll, you’ll need to add a reference to it in your AnimalUI project:

1. Right-click on the AnimalUI project in the Solution Explorer and select “Add” > “Reference…”.
2. Click “Browse” and navigate to the location of the AnimalActions.dll file. Select it and click “Add”.
3. Check the box next to the AnimalActions reference and click “OK”.

Now, you can use the Animal class from the DLL in your MainWindow.xaml.cs file. Make sure to uncomment the using AnimalActions; directive at the top, and modify the button click event handlers to use the Animal class methods instead of the placeholder text. For example:

// Assuming the Animal class and its methods are public
Animal animal = new Animal();

private void btnEat_Click(object sender, RoutedEventArgs e)
{
    lblActionStatement.Content = animal.Eat();
}

Repeat this modification for each button click event handler (btnSleep_Click, btnRun_Click, btnPlay_Click), calling the corresponding method from the Animal class.

Final Steps

Build and run your application to ensure everything is working as expected. The UI should display the image of your animal, and clicking the buttons should update the label with the animal’s actions as returned by the methods in your DLL.

This exercise provides a great opportunity to practice integrating different components of a software application, including using external libraries and developing a user interface.