WPF - StackPanel рисует не убираемый Border

Question

Я заметил, что используя DockPanel и пихая в один из его элементов StackPanel (как на скрине), я вижу обводку этого самого StackPanel, однако у которого нет Border и BorderThickness. Теперь я хз как ее убрать, очень сильно режет глаза. Если что-то не так понял, простите

Вот метод класса Window, в котором устанавливается весь UI (скрин 2):

public void SetLayout()
        {
            Content = mainDock;
        leftStackPanel.Background = Styles.SuperDark.Color;
        mainDock.Children.Add(leftStackPanel);
        DockPanel.SetDock(leftStackPanel, Dock.Left);

        addObjectButton.Click += delegate { HubModel.CreateObject(); };
        leftStackPanel.Children.Add(addObjectButton);

        mainDock.Children.Add(rightDock);
        DockPanel.SetDock(rightDock, Dock.Right);

        rightDock.Children.Add(rightTopTextBlock);
        DockPanel.SetDock(rightTopTextBlock, Dock.Top);

        objectsStack.Background = Styles.Dark.Color;
        rightDock.Children.Add(objectsStack);
        DockPanel.SetDock(objectsStack, Dock.Top);
    }

Answer 1

Это не бортик, это не точное попадание в пиксель. То есть вы задаете координаты, но контрол на полпикселя может не точно отрисоваться там где нужно. Для того чтобы разметить статическую сетку интерфейса приложения, надо использовать Grid. При этом сами контролы позиционировать от ячеек этого грида, а не от левого верхнего угла окна. Тогда этих линий просвечивающих не будет. Другими словами, это не бортик, это просвечивает белый фон окна через нечеткие границы. Решение - отказаться от пиксельного позиционирования блоков в окне.

Давайте погадаю по фотографии, то есть напишу тоже самое что у вас на скриншотах.

Будет 2 окна - MainWindow и EditWindow, второе буду использовать как диалог.

Разметка и код основного окна

MainWindow.xaml

<Window x:Class="WpfAppDemoBindings.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemoBindings"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Style="{StaticResource DarkWindowStyle}">
    <Window.Resources>
        <Style TargetType="{x:Type Button}" x:Key="PlusButtonStyle" BasedOn="{StaticResource FlatButtonStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" Height="{TemplateBinding ActualWidth}">
                            <Grid>
                                <Rectangle Stroke="Black" Margin="3" StrokeThickness="1" StrokeDashArray="2 2" SnapsToDevicePixels="True"/>
                                <ContentPresenter Margin="4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical" Background="#23192b">
            <Button Content="+" Style="{StaticResource PlusButtonStyle}" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
private void Button_Click(object sender, RoutedEventArgs e)
{
    EditWindow window = new EditWindow();
    window.Owner = this;
    if (window.ShowDialog() ?? false)
    {
        MessageBox.Show(window.Data.ToString());
    }
}

}

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

Они расположены в App.xaml.

<Application x:Class="WpfAppDemoBindings.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfAppDemoBindings"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="{x:Type Window}" x:Key="DarkWindowStyle">
            <Setter Property="Background" Value="#2e2035"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
        <Style TargetType="{x:Type Button}" x:Key="FlatButtonStyle">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Background" Value="#564a6a"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter Margin="4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseDirectlyOver" Value="True">
                    <Setter Property="Background" Value="#665a7a"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Application.Resources>
</Application>

Данные

Здесь есть работа с данными, поэтому я создам класс для данных и чтобы управлять данными из кода через биндинги в окне, я реализую INotifyPropertyChanged с помощью вот такого простого класса, его просто надо добавить впроект:

NotifyPropertyChanged.cs

public class NotifyPropertyChanged : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

}

Теперь я от него отнаследуюсь и реализую свойства для класса с данными

FormData.cs

public class FormData : NotifyPropertyChanged
{
    private string name;
    private string features;
public string Name
{
    get => name; 
    set
    {
        name = value;
        OnPropertyChanged();
    }
}
public string Features
{
    get => features;
    set
    {
        features = value;
        OnPropertyChanged();
    }
}

public void Reset()
{
    Name = "";
    Features = "";
}

public override string ToString()
{
    return $"Name = {Name}, Features = {Features}";
}

}

Окно редактирвоания

EditWindow.xaml

<Window x:Class="WpfAppDemoBindings.EditWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemoBindings"
        mc:Ignorable="d"
        Title="Create object" SizeToContent="Height" Width="500" Style="{StaticResource DarkWindowStyle}" WindowStartupLocation="CenterOwner" Background="#23192b" ResizeMode="NoResize"
        d:DataContext="{d:DesignInstance local:FormData}">
    <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Foreground" Value="#adb5bd"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Background" Value="#2e2035"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="3"/>
        </Style>
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource FlatButtonStyle}"/>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Fill the information" Margin="0" Padding="20" TextAlignment="Center" Background="#23192b"/>
        <Grid Grid.Row="1" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="Name"/>
            <TextBox Grid.Column="1" Text="{Binding Name}"/>
            <TextBlock Text="Features" Grid.Row="1"/>
            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Features}"/>
        </Grid>
        <Grid Grid.Row="2" Background="#2e2035">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Button Content="Reset" Click="Button_Click"/>
            <Button Grid.Column="2" Content="Create" Click="Button_Click_1"/>
        </Grid>
    </Grid>
</Window>

Я здесь не стал использовать вертикалюную StackPanel только потому что мне захотелось, чтобы текстбоксы были одинаковой ширины. Использовать для этого Grid - проще всего.

EditWindow.xaml.cs

public partial class EditWindow : Window
{
    public FormData Data { get; }
public EditWindow()
{
    InitializeComponent();
    Data = new FormData();
    DataContext = Data; // указываю, где Binding в XAML будет брать данные
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    Data.Reset();
}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    DialogResult = true;
    Close();
}

}

Если нажать Reset, текстбоксы очистятся. Если нажать Create, то диалог закроется и появится вот такой MessageBox:

Вот, собственно и всё. Никаких фантомных бортиков у меня нет. И оно при этом не только хорошо выглядит, но и работает. Если вы начнете знакомиться с биндингами, обратите внимание на ItemsControl и ObservableCollection. Примеров решения разноплановых задач с их использованием даже среди моих ответов здесь очень много.

Ссылка на проект на Яндекс.Диске