Problem with UNO style in MainPage.xaml

[ward-horsfall]

Hi,

What is wrong with my XAML code in MainPage.xaml

TextBox_Source looks different from TextBox_Destination and TextBox_Game_Name.

They should look the same. I want all three to look like TextBox_Destination.

What is wrong with UniformTextBoxStyle?

Thanks

Ward

`

Code:

<!-- TextBox Style   -->
<Page.Resources>
    <Style TargetType="TextBox" x:Key="UniformTextBoxStyle">
        <Setter Property="Width" Value="500"/>
        <Setter Property="Height" Value="Auto"/>
        <Setter Property="Margin" Value="10,0,0,0"/>
    </Style>
</Page.Resources>
<ScrollViewer>
<Grid utu:SafeArea.Insets="VisibleBounds">
  <StackPanel
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Orientation="Vertical"
    Spacing="10">

    <!-- Source Folder -->        
    <StackPanel Orientation="Horizontal" Spacing="5">
      <Button Width="150" Height="30" x:Name="Button_Source" Click="Button_Source_Click">Source Folder:</Button>

      <!-- Issue why does this TextBox not look the same as the ones below it has the same attributes in the style?   -->
      <TextBox x:Name="TextBox_Source" PlaceholderText="Enter text here" Style="{StaticResource UniformTextBoxStyle}"/>
        
    </StackPanel>

      
    <!-- Destination Folder -->
    <StackPanel Orientation="Horizontal" Spacing="5">
      <Button Width="150" Height="30" x:Name="Button_Destination" Click="Button_Destination_Click">Target Folder:</Button>
      <TextBox Width="500" Height="Auto" x:Name="TextBox_Destination" PlaceholderText="Enter text here" Margin="10,0,0,0"/>
    </StackPanel>

    <!-- Game Name   -->
    <StackPanel Orientation="Horizontal" Spacing="5">
      <Button Width="150" Height="30" x:Name="Button_Game_Name" Click="Button_Game_Name_Click">Game Name:</Button>
      <TextBox Width="500" Height="Auto" x:Name="TextBox_Game_Name" PlaceholderText="galaga88" Margin="10,0,0,0"/>
    </StackPanel>

    <!-- Output -->
    <StackPanel Orientation="Horizontal" Spacing="5">
      <TextBox Width="500" Height="Auto" x:Name="TextBox_Output" PlaceholderText="" Margin="165,0,0,0"/>
     </StackPanel>

    <!-- Command Buttons -->
    <Grid Width="660">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Button Width="150" Height="30" x:Name="Button_Set_Folders" Click="Button_Set_Folders_Click" Grid.Column="0" HorizontalAlignment="Left">Set Folders</Button>
      <Button Width="150" Height="30" x:Name="Button_Copy_Files" Click="Button_Copy_Files_Click" Grid.Column="1" HorizontalAlignment="Center">Copy Files</Button>
      <Button Width="150" Height="30" x:Name="Button_Exit" Click="Button_Exit_Click" Grid.Column="2" HorizontalAlignment="Right">Exit</Button>
    </Grid>

  </StackPanel>
</Grid>

MainPage_xaml.txt

`

[Xiaoy312]

This may seems counter-intuitive, but you actually need to specify the Style.BasedOn when attempt to override it. This is not only the case for Uno, but for WinAppSdk as well:

This should fix the problem you are encounting:

<Style TargetType="TextBox" x:Key="UniformTextBoxStyle" BasedOn="{StaticResource MaterialOutlinedTextBoxStyle}">

You can find the x:Key of the default style for the Material theme here:
https://platform.uno/docs/articles/external/uno.themes/doc/lightweight-styling.html#resource-keys

[ward-horsfall]

Hi Xiaoy312,

Thankyou great work :)

Thanks again,

Ward