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

[noidilin]

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>

[jjw24]

Currently in flow width is fixed due to it not working well with shadow effect. I have a build from dev branch which you can use to alter the width, this may not be the final build as we need to investigate the issue.

In the mean time you can download this build and adjust your theme:
https://ci.appveyor.com/api/buildjobs/42f74cw64sskl8xm/artifacts/Output%2FPackages%2FFlow-Launcher-v1.7.2.exe (from #374 )

To alter the width you should only need override this key in your xaml as

<Style x:Key="WindowStyle" TargetType="{x:Type Window}" BasedOn="{StaticResource BaseWindowStyle}" >
    <Setter Property="Width" Value="1000" />
</Style>

This should also keep the query box aligned list box.

Let me know how you go

[noidilin]

I tried my custom theme and some other default theme, yet the result are the same.

I specified the width in WindowStyle, but the appearance didn't change.

<Style x:Key="WindowStyle" TargetType="{x:Type Window}" BasedOn="{StaticResource BaseWindowStyle}" >
    <Setter Property="Width" Value="1000" />
</Style>

So, I tried the WindowBorderStyle and get the same result as last time.

<Style x:Key="WindowBorderStyle" BasedOn="{StaticResource BaseWindowBorderStyle}" TargetType="{x:Type Border}">
    <Setter Property="Width" Value="1000" />
</Style>

[jjw24]

have you tried with the build link?
https://ci.appveyor.com/api/buildjobs/42f74cw64sskl8xm/artifacts/Output%2FPackages%2FFlow-Launcher-v1.7.2.exe

Install it then change the xaml

[jjw24]

@LinGaNinJa how you go with this?

[noidilin]

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.

[jjw24]

Hope this function will exist in the future official release.

Any time. Yep this function will be implemented once we figure out the shadow issue. In the meantime I recommend turning off your auto update and check the release notes before updating that this feature is rolled out.

[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.

[taooceros]