UserControl ritagliato quando usato in MainWindow - wpf, xaml

Ciao Stackoverflowers!

Sto creando un elenco con una barra di ricerca in XAML equando ho provato a utilizzare il mio nuovo UserControl in MainWindow.xaml, il pulsante in UserControl viene ritagliato nel designer anziché ridimensionato per adattarlo, perché?

Ecco il corpo MainWindow.xaml:

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>

<controls:SearchBox Grid.Column="0"/>
</Grid>

Ed ecco il corpo del controllo personalizzato:

    <Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<TextBox
Grid.Row="0"
VerticalAlignment="Center"
Text="Search"
TextBlock.FontStyle="Italic"
TextBlock.TextAlignment="Left"
/>

<!--   Content="{StaticResource FilterLogo}" -->
<Button
Grid.Column="1"
Content="Filter"
VerticalAlignment="Center"
HorizontalAlignment="Stretch">
</Button>


<ListBox
Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding DataContext}"
SelectedItem="{Binding DataContext}"
ScrollViewer.VerticalScrollBarVisibility="Visible">

</ListBox>

Non so davvero perché il mio controllo sia tagliato per essere onesto.

risposte:

1 per risposta № 1

Risposta breve: non si adatta.

Hai due colonne nella finestra principale. Poiché non è stata specificata la colonna in cui posizionare UserControl, per impostazione predefinita viene utilizzata la prima colonna. Ma il tuo Width le definizioni impongono che la colonna sia un quarto della dimensione della seconda colonna.

Il tuo SearchBox semplicemente non si adatta nello spazio che gli è stato assegnato.

Se rimuovi la stella (*) da questa linea:

    <ColumnDefinition Width="8*" />

... si adatterà senza essere ritagliato. (In alternativa, è possibile posizionare il controllo utente nella seconda colonna o espandere la finestra principale o ridurre la larghezza di UserControl.)

---

1 per risposta № 2

Quando si utilizzano le stelle nelle definizioni di colonna e riga, utilizzarle come percentuali. Come questo:

<Grid.ColumnDefinitions>
<ColumnDefinition Width=".1*" /> <!-- 10% -->
<ColumnDefinition Width=".9*" /> <!-- 90% -->
</Grid.ColumnDefinitions>

Questo è ciò che il lettore XAML ha interpretato dal tuo utilizzo:

<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" /> <!-- 800% -->
<ColumnDefinition Width="*" /> <!-- 100% -->
</Grid.ColumnDefinitions>

Ciò avrà risultati indesiderati.

---