This sample demonstrates a basic interactive element using WinUI principles. It showcases how to create a simple button that triggers a visual change in a designated area of the UI. This is a foundational example, illustrating event handling and dynamic content updates within a WinUI application.
Below is a representation of the interactive element. Click the button to see the message update.
Click the button to change this message!
This is a simplified XAML representation of the elements shown above.
<Grid RowDefinitions="Auto,Auto,*" Height="Auto">
<TextBlock Text="WinUI Sample - Sample 001" Style="{StaticResource TitleTextBlockStyle}" />
<Button Content="Trigger Action" Grid.Row="1" Margin="0,20,0,0" Click="Button_Click" />
<Border Grid.Row="2" BorderBrush="{ThemeResource SystemBaseLowColor}" BorderThickness="1" CornerRadius="8" Margin="0,20,0,0" Background="{ThemeResource SolidBackgroundBrush}">
<TextBlock x:Name="OutputTextBlock" Text="Click the button to change this message!" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20"/>
</Border>
</Grid>
This C# code snippet illustrates the event handler that responds to the button click.
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
OutputTextBlock.Text = "Action Triggered! The UI has updated.";
// You could add more complex logic here, like changing styles,
// navigating to another page, or fetching data.
}
}
The sample uses a Button element with a Click event handler. When the button is clicked, the Button_Click method in the C# code-behind is executed. This method then updates the Text property of a TextBlock named OutputTextBlock, which is visually displayed in the sample-output area.
This demonstrates a fundamental pattern in UI development: user interaction (clicking a button) leading to a change in the application's state and a corresponding update in the user interface.