Here is the style from the Styles.xaml.
<Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0,1,0,1"/>
<Setter Property="Margin" Value="-58,-15,-58,-15"/>
<Setter Property="Padding" Value="58,0,58,0"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
</Style>
Regardless of the size of the browser window, nor if I set the values to "Visible" I am not presented with a scroll bar. Any suggestions on how to correct this?
I was fiddling with this and decided to try changing the order of the LayoutRoot Grid and the ScrollViewer and this seems to have fixed it.
I changed
<Grid x:Name="LayoutRoot" DataContext="{StaticResource ViewModel}">
<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
...
</ScrollViewer>
</Grid>
to this:
<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
<Grid x:Name="LayoutRoot" DataContext="{StaticResource ViewModel}">
...
</Grid>
</ScrollViewer>
Related
I want to do create static style where TextBox element will have 2 different colored borders around it. Can I achieve this?
I already have rounded textbox with 1 border, but I'm clueless how to add another around it.
<Style TargetType="{x:Type TextBox}" x:Key="RoundTextBox">
<Style.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="3"/>
</Style>
</Style.Resources>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FF32C17C"/>
<GradientStop Color="#FF01312F" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="#FF69FF55"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="20,10,0,-5"/>
</Style>
This is my code for textbox style.
Thank you for all answers :)
You can change control template of the textbox and define another border inside the border.
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border
BorderBrush="Red"
BorderThickness="1"
CornerRadius="2">
<Border
Name="Border"
Background="White"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="2">
<ScrollViewer x:Name="PART_ContentHost" Margin="0" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TextBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Test" />
</Grid>
Here is the result!
For more information about textbox styles and templates you can click here.
I am trying to get the MenuFlyout to align bottom-left of the button. I can achieve this if i put the button at the left of the screen, but if the button is anywhere else the MenuFlyout is always centered right under the button. I suspect that I have to create a template and change a property in there but I do not know what I need to change to achieve this.
I've pasted my xaml below with a note of where i suspect I need to make the change. I am new to xaml, any help or guidance will be much appreciated. Thanks!
<Page
x:Class="ButtonMenuFlyout.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonMenuFlyout"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="BasicTextStyle" TargetType="MenuFlyoutItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="13" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="MinHeight" Value="36" />
</Style>
<Style x:Key="MenuFlyoutPresenterStyle1" TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Padding" Value="20,0,20,16" />
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Grid Background="{TemplateBinding Background}">
<!--[change property in here]-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="buttonMenuFlyout"
Content="..."
VerticalAlignment="Top"
HorizontalAlignment="right"
Padding="16,4"
Margin="120,10,0,5"
Background="White">
<Button.Flyout>
<MenuFlyout Opened="MenuFlyout_Opened" MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle1}">
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Settings" Click="MenuFlyoutItem_Click" />
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Feedback" Click="MenuFlyoutItem_Click_1"/>
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Notebook" Click="MenuFlyoutItem_Click_2" />
</MenuFlyout>
</Button.Flyout>
</Button>
</Grid>
</Page>
In your MenuFlyout_Opened method, you can explicitly call ShowAt(UIElement, Point) method.
This first parameter will probably be your buttonMenuFlyout; the second one, your offset which might roughly be new Point(0, buttonMenuFlyout.ActualHeight).
I want to stretch a listbox horizontally and vertically in UWP. I tried some WPF solutions, but none of them worked. (Stretch line to width of Itemstemplate canvas in itemscontrol)
What I tried:
<Page.Content>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Background" Value="AliceBlue" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<ItemsPresenter Height="252" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>asdf</ListBoxItem>
<ListBoxItem>asdfasdf</ListBoxItem>
<ListBoxItem>asdfsdf</ListBoxItem>
<ListBoxItem>34</ListBoxItem>
<ListBoxItem>as2df</ListBoxItem>
<ListBoxItem>asdf</ListBoxItem>
</ListBox>
</Grid>
</Page.Content>
The result is the following:
How can I stretch a listbox in uwp?
You have Explicitly Set the Height="252". That is the reason why it does not show up. Also you set the background of actual ListBox to Green but that is overridden by your ItemsPanelTemplate so Green doesn't show up.
Your final XAML should look something like below.
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Background" Value="AliceBlue" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem>asdf</ListBoxItem>
<ListBoxItem>asdfasdf</ListBoxItem>
<ListBoxItem>asdfsdf</ListBoxItem>
<ListBoxItem>34</ListBoxItem>
<ListBoxItem>as2df</ListBoxItem>
<ListBoxItem>asdf</ListBoxItem>
</ListBox>
This is not Tested but should work as you expected.
I want to create a grid of images without any margin between them. I tried to achieve this through a GridView. If there is an easier way, please let me know.
I found this answers on StackOverflow:
https://stackoverflow.com/a/10492464
https://stackoverflow.com/a/23817931/5739170
And ended up with this code:
<Page.Resources>
<Style x:Key="MyGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0" Padding="0" Margin="0" BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<GridView ItemsSource="{x:Bind FieldList}" Margin="0,50,0,0" Padding="0" BorderThickness="0" ItemContainerStyle="{StaticResource MyGridViewItemStyle}" IsItemClickEnabled="True" ItemClick="OnItemClick">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Field">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock x:Name="text">Hallo!</TextBlock>
</StackPanel>
</Grid>
But there is still a margin left:
Screenshot
I have also tried to use negative margins but when I use them clicks aren't recognized correctly anymore.
How can I remove the margins?
Seems like the GridViewItem has a default MinWidth of 44px.
You can set it to 0 via your GridViewItemStyle:
<Setter Property="MinWidth" Value="0" />
EDIT: it also has a default MinHeight, you might want to set that to 0 as well.
The code below should work:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0"/>
</Style>
</GridView.ItemContainerStyle>
Your code is good. If you add a Grid in the DataTemplate (with a Background), you will see there is no margin between grids :
<DataTemplate x:DataType="data:Field">
<Grid Background="Red">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</Grid>
</DataTemplate>
Your problem is the following : you set a fixed size for Image control wich all of them is in a container, but the container doesn't have a fixed, so images are centered in the container.
I see two solutions. First is to remove the fixed size for Image control and use Strecth property to fill correctly :
<DataTemplate x:DataType="data:Field">
<Image VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="UniformToFill"
Margin="0"
Source="{x:Bind ImagePath}"/>
</DataTemplate>
For the first solution, you must be sure of the filling behavior of the container. You can do something like :
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" />
The second solution is to set a fixed size on the container directly :
<Style x:Key="MyGridViewItemStyle"
TargetType="GridViewItem">
<Setter Property="Padding"
Value="0" />
<Setter Property="Margin"
Value="0" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I create a WPF UserContorl and create a style for ListView in my UserContorl theme.
My ListView Style :
<Style TargetType="ListView" x:Key="ReminderListView">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Style="{StaticResource ReminderCheckBox}" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Title, Mode=OneTime}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
My ListView Style Work Correctly in UserContorl.
My used Xaml in UserControl:
<ListView Name="snoozeListView" Grid.Column="1" Style="{StaticResource ReminderListView}" ItemsSource="{Binding ReminderItems}" >
i use this UserControl in other WPF project which have a ListViewItem Style.
ListViewItem Style :
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="2,0,2,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel SnapsToDevicePixels="True" Margin="2,0,2,0">
<Grid x:Name="Grid" Background="Transparent">
<Rectangle x:Name="SelectedRect" IsHitTestVisible="False" Fill="{StaticResource SelectedBackgroundBrush}" Opacity="0"/>
<GridViewRowPresenter Height="Auto" Margin="2"/>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now ListViewItem style overwriting the ListView ItemTemplate Style which defined in user control theme.
How can i stop overwriting.