CODEWITHSUNDEEP
c#wpf
MyNewName
MyNewName

Reputation: 1055

WPF place container on fixed position

I want to place a container (with any custom content e.g. a ListView, ...) on a fixed position. The container should appear, when pressing a button. Take a look on this image:

img

Press Me and Click Me are buttons. If Click Me was clicked, the red container above should appear. Same with Press Me.

My question: how can I realise something like that? The red container should appear over all other controls (z-index). Is a Canvas the best choice? What's about the size of this container?

This question is really abstract. I don't want any solution, just some ideas about the container I should use and how it should be placed.

A question by the way.

Should I create the red containers in XAML and only change the state of visiblity? Or should I create the red containers in C#? In terms of performance.

Maybe some keywords to search are enough. Because I have no idea how to call this.

Upvotes: 1

Views: 3213

Answers (1)

Kodaloid
Kodaloid

Reputation: 1326

This site is more about giving answers than adding to a discussion based on opinion. So in the spirit of things, and because it is far easier to answer this question with an example, here is how I would go about it.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <Border x:Name="Container1" HorizontalAlignment="Left" Width="120" Height="100"
          Grid.Row="1" BorderBrush="Red" BorderThickness="1" Visibility="Hidden" />
  <Border x:Name="Container2" HorizontalAlignment="Right" Width="120" Height="100"
          Grid.Row="1" BorderBrush="Red" BorderThickness="1" Visibility="Hidden" />

  <Button x:Name="Button1" HorizontalAlignment="Left" Width="100" Height="30"
          Grid.Row="2" Content="Press Me" Click="Button1_Click" />
  <Button x:Name="Button2" HorizontalAlignment="Right" Width="100" Height="30"
          Grid.Row="2" Content="Click Me" Click="Button2_Click" />
</Grid>

And for the code behind, I would do something like this:

private void Button1_Click(object sender, RoutedEventArgs e)
{
    bool isVisible = Container1.Visibility == Visibility.Visible;
    Container1.Visibility = isVisible ? Visibility.Hidden : Visibility.Visible;
}

private void Button2_Click(object sender, RoutedEventArgs e)
{
    bool isVisible = Container2.Visibility == Visibility.Visible;
    Container1.Visibility = isVisible ? Visibility.Hidden : Visibility.Visible;
}

1. How can I realise something like that? The red container should appear over all other controls (z-index).

This is straight forward, putting the <Grid> element from my example above at the bottom of your XAML would make it sit on top of every other control, as elements are placed by default on the z-index based on their cascading order in XAML.

2. Is a Canvas the best choice?

Unless your top level container (Window, Page, UserControl) is of fixed width and height, I would recommend sticking with containers that deal better with the users ability to resize it. If you used a Canvas and the user was able to change the size of the top level container, you would have to manually re-position the buttons and border elements every time the top level container was resized to maintain position.

3. What's about the size of this container?

That is completely down to how big you wish to make your layout, in the example I have put sizes on the elements which would display correctly in a minimum container size of 340 x 340 pixels.

4. Should I create the red containers in XAML and only change the state of visiblity? Or should I create the red containers in C#? In terms of performance.

Placing the "container" elements in your XAML is your best bet, but being honest you would not notice a difference in speed. The only advantage to placing them in XAML is that it is cleaner.

Upvotes: 2

Related Questions