WPF Window Visual Effect

Question

новичок в wpf хочет знать, как добиться следующего;

Для простоты;У меня есть окно, разделенное на две строки через некоторые контейнеры.Я хочу поместить кнопку в верхнем ряду (логин), которая при нажатии на кнопку, чтобы она исчезла, и заменить ее на пользовательский элемент управления.

Я могу скрыть кнопку через Visibility = "Collapse", однако мойПользовательский элемент управления обрезан границами контейнера.

Как сделать так, чтобы пользовательский элемент управления перекрывал контейнер?

Вот пример того, что я получаю -

<DockPanel>
        <StackPanel Height="100" DockPanel.Dock="Top">

            <Button Content="Login"
                    Visibility="Collapsed"
                    Width="100"
                    Height="50"/>

            <StackPanel>
                <TextBlock Text="This is the big UserControl which is cut off by the bounds of the stack panel"
                           FontSize="20"
                           Width="200"
                           Height="200"
                           TextWrapping="Wrap"/>
            </StackPanel>

        </StackPanel>
    </DockPanel>

Где TextBlock заменяется формой регистра пользовательского элемента управления с метками и текстовыми полями и кнопкой регистрации.

Как вы можете видеть, текст обрезается границами панели стека, как это делает пользовательский элемент управления.быть, я хочу, чтобы это перекрывалось, сохраняя границы стековой панели, как я могу добиться этого?

Answer 1

В этом примере используется кнопка ToggleButton, чтобы кнопка не исчезала, и вы можете переключать видимость пользовательского элемента управления.

Сначала создайте представление

<Grid>
    <Grid.Resources>
        <BooleanToVisibilityConverter x:Key="b2v" />
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <ToggleButton Grid.Row="0"  IsChecked="{Binding IsButtonVisible, Mode=TwoWay}">Click Me</ToggleButton>

    <ListBox Grid.Row="1" Visibility="{Binding IsButtonVisible, Converter={StaticResource b2v}}">
        <ListBox.Items>
            <ListBoxItem>London</ListBoxItem>
            <ListBoxItem>New York</ListBoxItem>
            <ListBoxItem>Paris</ListBoxItem>
        </ListBox.Items>
    </ListBox>
</Grid>

Create ViewModel

    public class MainWindowViewModel : INotifyPropertyChanged
    {
    private bool _isButtonVisible = true;

    public bool IsButtonVisible
    {
        get { return _isButtonVisible; }
        set
        {
            if (value == _isButtonVisible) return;
            _isButtonVisible = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    //[NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    }

Загрузите ViewModel в DataContext представления в конструкторе представления, чтобы работали привязки.

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
    public MainWindow()
    {
        InitializeComponent();

        this.DataContext = new MainWindowViewModel();
    }
    }

Это должно работать.

Кнопка переключения изменяет значениесвойство IsButtonVisible, которое управляет видимостью списка.

Answer 2

Если вам нужна кнопка поверх UserControl, вы можете сделать что-то вроде этого -

<Grid Margin="2">
  <userControl1></userControl1>
  <Button/>
</Grid>

Вы можете контролировать то, что видно, а что нет, с помощью свойства Visibility, как вы упомянули.