<UserControl
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid
        ColumnDefinitions="*,auto"
        RowDefinitions="46,6,*">
        
        <TextBox
            Grid.Row="0"
            Grid.Column="0"
            Watermark="Search chats and messages" />
        
        <Rectangle
            Grid.Row="1"
            Grid.Column="0"
            Grid.ColumnSpan="2" />
        
        <Button
            Grid.Row="0"
            Grid.Column="1">
            
            <Panel>
                <Ellipse />
                <Image Source="resm:Tel.Egram.Application.Icons.Light.More32.png?assembly=Tel.Egram.Application" />
            </Panel>
            
        </Button>
        
    </Grid>
    
    <UserControl.Styles>
        
        <Style Selector="TextBox">
            <Setter Property="Height" Value="28" />
            <Setter Property="Margin" Value="14,2,8,0" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Background" Value="#ffffff" />
            <Setter Property="BorderBrush" Value="#d8d8d8" />
        </Style>
        
        <Style Selector="TextBox /template/ Border">
            <Setter Property="CornerRadius" Value="4" />
        </Style>
        
        <Style Selector="Rectangle">
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush 
                        StartPoint="0%,0%"
                        EndPoint="0%,100%">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop
                                Offset="0"
                                Color="#f0f0f0"/>
                            <GradientStop
                                Offset="1"
                                Color="Transparent"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style Selector="Button">
            <Setter Property="Width" Value="26" />
            <Setter Property="Height" Value="26" />
            <Setter Property="Margin" Value="0,2,10,0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
        
        <Style Selector="Button Image">
            <Setter Property="Width" Value="14" />
            <Setter Property="Height" Value="14" />
        </Style>
        
        <Style Selector="Button Ellipse">
            <Setter Property="Width" Value="24" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Fill" Value="#5f6e8c" />
        </Style>
        
    </UserControl.Styles>

</UserControl>