Theme: When setting interface width wider in theme, the right hand side will be cut off.

I want to make the result of dictionary plugin wider. So, I specify the width in the xaml file as I usually do in wox theme. Setting the width property of WindowBorderStyle used to do the job, yet I can’t achieve the same result.

Here is the default width.

By the way, I also try to align the query box with the list box, but didn’t success. Any suggestion to achieve this result?

Here is the theme.

<?xml version="1.0" encoding="UTF-8"?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Base.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <Style x:Key="QueryBoxStyle" BasedOn="{StaticResource BaseQueryBoxStyle}" TargetType="{x:Type TextBox}">
        <Setter Property="Background" Value="#1a1a1a" />
        <Setter Property="Foreground" Value="#ffffff" />
        <Setter Property="FontSize" Value="28" />
        <Setter Property="Padding" Value="24, 8, 24, 8" />
        <Setter Property="Height" Value="64" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border x:Name="border" BorderBrush="#1a1a1a" CornerRadius="6" BorderThickness="3" Background="#1a1a1a" SnapsToDevicePixels="True">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="12" ShadowDepth="0" Opacity="0.9" Color="#000000" />
                        </Border.Effect>
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
                                      Background="{TemplateBinding Background}">
                            <ScrollViewer.ContentTemplate>
                                <DataTemplate>
                                    <Grid Background="{Binding Background, ElementName=PART_ContentHost}" RenderOptions.ClearTypeHint="Enabled">
                                        <ContentPresenter Content="{Binding Path=Content, ElementName=PART_ContentHost}"></ContentPresenter>
                                    </Grid>
                                </DataTemplate>
                            </ScrollViewer.ContentTemplate>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="QuerySuggestionBoxStyle" BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}" TargetType="{x:Type TextBox}">
        <Setter Property="Background" Value="#1a1a1a" />
        <Setter Property="Foreground" Value="#bcbcbc" />
        <Setter Property="FontSize" Value="28" />
        <Setter Property="Padding" Value="24, 8, 24, 8" />
        <Setter Property="Height" Value="64" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <!-- BG of SearchBox -->
                    <Border x:Name="border" BorderBrush="#1a1a1a" CornerRadius="6" BorderThickness="3" Background="#1a1a1a" SnapsToDevicePixels="True">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="12" ShadowDepth="0" Opacity="0.9" Color="#000000" />
                        </Border.Effect>
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
                                      Background="{TemplateBinding Background}">
                            <ScrollViewer.ContentTemplate>
                                <DataTemplate>
                                    <Grid Background="{Binding Background, ElementName=PART_ContentHost}" RenderOptions.ClearTypeHint="Enabled">
                                        <ContentPresenter Content="{Binding Path=Content, ElementName=PART_ContentHost}"></ContentPresenter>
                                    </Grid>
                                </DataTemplate>
                            </ScrollViewer.ContentTemplate>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="WindowBorderStyle" BasedOn="{StaticResource BaseWindowBorderStyle}" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Width" Value="1000" />
    </Style>
    
    <Style x:Key="WindowStyle" TargetType="{x:Type Window}" BasedOn="{StaticResource BaseWindowStyle}" />
    <Style x:Key="PendingLineStyle" BasedOn="{StaticResource BasePendingLineStyle}" TargetType="{x:Type Line}" />
    <Style x:Key="ItemTitleStyle" BasedOn="{StaticResource BaseItemTitleStyle}" TargetType="{x:Type TextBlock}">
        <Setter Property="Margin" Value="5, 0"/>
        <Setter Property="Foreground" Value="#dddddd" />
    </Style>
    <Style x:Key="ItemSubTitleStyle" BasedOn="{StaticResource BaseItemSubTitleStyle}" TargetType="{x:Type TextBlock}">
        <Setter Property="Margin" Value="5, 0"/>
        <Setter Property="Foreground" Value="#bcbcbc" />
    </Style>
    <Style x:Key="ItemTitleSelectedStyle" BasedOn="{StaticResource BaseItemTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
        <Setter Property="Margin" Value="5, 0"/>
        <Setter Property="Foreground" Value="#FFFFF8" />
    </Style>
    <Style x:Key="ItemSubTitleSelectedStyle" BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
        <Setter Property="Margin" Value="5, 0"/>
        <Setter Property="Foreground" Value="#D9D9D4" />
    </Style>
    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#444444</SolidColorBrush>
    
    <Style x:Key="BaseListboxStyle" TargetType="{x:Type ListBox}">
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <!-- BG of SearchBox -->
                    <Border x:Name="border" BorderBrush="#1a1a1a" CornerRadius="6" BorderThickness="3" Background="#1a1a1a" SnapsToDevicePixels="True">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="12" ShadowDepth="0" Opacity="0.9" Color="#000000" />
                        </Border.Effect>
                        <ScrollViewer Focusable="false" Template="{DynamicResource ScrollViewerControlTemplate}">
                            <VirtualizingStackPanel IsItemsHost="True" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="ThumbStyle" BasedOn="{StaticResource BaseThumbStyle}" TargetType="{x:Type Thumb}" />
    <Style x:Key="ScrollBarStyle" BasedOn="{StaticResource BaseScrollBarStyle}" TargetType="{x:Type ScrollBar}" />
</ResourceDictionary>

[taooceros]

@jjw24 There is another issue, that the distribution of the resultview is hardcoding, so after changing the width, the alt+n will distribution on the wrong place. We also need to address that issue.

[Scutum-L]

Sorry for the late reply. Turns out I didn’t restart flow after adjusting the width of WindowStyle. I used to switch theme in setting to make any adjustment in my custom theme appear.

The result is great! It works as my expectation. (I exaggerate the width increment in order to make the adjustment more clear in screenshot.)

This is original width without any adjustment.

I think that the adjustment with width makes the experience on 4k monitor way more better. Really thanks a lot. Hope this function will exist in the future official release.