StackPanel wird nicht linksbündig ausgerichtet

Question

Ok, neu in WPF und habe damit begonnen, ein kleines UI für ein Projekt zu erstellen. Ich habe mich gefragt ...

Warum wird der Inhalt der Schaltfläche nicht ausgerichtet?

 <ToggleButton Name="toggleButtonRobotConnect" Width="93.6" Margin="20,5,5,5" Click="toggleButtonRobotConnect_Click"> 
      <ToggleButton.Content> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center"> 
        <StackPanel Orientation="Horizontal"> 
         <Ellipse Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse> 
         <Ellipse Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse> 
        </StackPanel>       
        <TextBlock Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/> 
       </StackPanel> 
      </ToggleButton.Content> 
     </ToggleButton> 

Gezeigt wie unten. Beachten Sie das Zimmer auf der linken Seite, ich möchte das, wenn möglich, loswerden? Ich dachte, ich könnte mich links ausrichten?

Sobald ich "connect" ich den Text zu aktualisieren, so dass es wie unten aussieht (Hinweis gibt es keinen extra Raum).

Wie kann ich meine XAML-Code ändern, so dass die farbigen „Lichter“ sind immer ausgerichtet und jede Extraraum befindet sich am Ende der TextBlock- Seite?

Danke!

Answer 1

Rüsten Sie Ihren XAML als unten:

 <ToggleButton Name="toggleButtonRobotConnect" Width="93.6" Margin="20,5,5,5" HorizontalContentAlignment="Left" Click="toggleButtonRobotConnect_Click" Height="50"> 
     <ToggleButton.Content> 
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center"> 
       <StackPanel Orientation="Horizontal"> 
        <Ellipse Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse> 
        <Ellipse Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse> 
       </StackPanel> 
       <TextBlock Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/> 
      </StackPanel> 
     </ToggleButton.Content> 
    </ToggleButton> 

Sie brauchen nur

hinzufügen

HorizontalContentAlignment="Left" 

Answer 2

Ich biete diese Lösung an, indem ich annahm, dass Sie die Größe Ihrer Schaltfläche entsprechend dem Inhalt Ihrer Schaltfläche ändern müssen.

Probieren Sie diese Lösung, es wird die Breite der Schaltfläche entsprechend Ihrer inneren Inhaltsgröße ändern. Bedenken Sie, dass ich dort auch eine Mindestbreite hinzugefügt habe. So können Sie diesen Wert entsprechend Ihrer Anforderung ändern.

<Style TargetType="{x:Type Button}"> 
    <Setter Property="MinWidth" Value="20" /> 
    <Setter Property="HorizontalAlignment" Value="Center" /> 
</Style> 

nach Ihren Code es nur wie unten ändern, ohne über Code hinzufügen,

<ToggleButton Name="toggleButtonRobotConnect" MinWidth="20" HorizontalAlignment="Center" Margin="20,5,5,5" Click="toggleButtonRobotConnect_Click"> 
      <ToggleButton.Content> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center"> 
        <StackPanel Orientation="Horizontal"> 
         <Ellipse Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse> 
         <Ellipse Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse> 
        </StackPanel> 
        <TextBlock Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/> 
       </StackPanel> 
      </ToggleButton.Content> 
    </ToggleButton> 

Answer 3

würde ich empfehlen nicht mit StackPanel; stattdessen Gitter verwenden:

<ToggleButton Name="toggleButtonRobotConnect" Width="93.6" Margin="20,5,5,5" Click="toggleButtonRobotConnect_Click"> 
    <ToggleButton.Content> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="auto" /> 
       <ColumnDefinition Width="auto" /> 
       <ColumnDefinition Width="auto" /> 
      </Grid.ColumnDefinitions> 

      <Ellipse Grid.Column="0" Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse> 
      <Ellipse Grid.Column="1" Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse> 

      <TextBlock Grid.Column="2" Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" Visibility="Visible" /> 
      <TextBlock Grid.Column="2" Name="textBlockRobotConnect" Text="Disconnect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" Visibility="{Binding ElementName=textBlockRobotDisconnect, Path=Visibility, Converter={StaticResource InvertedVisibilityConverter}}" /> 
     </Grid> 
    </ToggleButton.Content> 
</ToggleButton> 

Die beiden TextBlocks überlappen sich in der gleichen Spalte im Grid. Dies ermöglicht es, dass der Button sowohl "Connect" - als auch "Disconnect" -Text aufnehmen kann, ohne seine Größe zu ändern.

Natürlich müssen Sie den Konverter implementieren. Eine Sache zu beachten ist, dass Sie "versteckte" Sichtbarkeit verwenden müssen, damit die Größenberechnung den ausgeblendeten TextBlock berücksichtigt.