<UserControl
x:Class="scintillauwp.ScintillaControlEx"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:scintillauwp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" SizeChanged="UserControl_SizeChanged" MinWidth="100" MinHeight="100">
<Grid x:Name="rootLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<canvas:CanvasControl x:Name="canvas" Grid.RowSpan="2" Grid.ColumnSpan="2"
PointerWheelChanged="canvas_PointerWheelChanged" PointerMoved="canvas_PointerMoved" PointerPressed="canvas_PointerPressed" PointerReleased="canvas_PointerReleased" MinWidth="100" MinHeight="100" PointerEntered="canvas_PointerEntered" KeyUp="canvas_KeyUp" KeyDown="canvas_KeyDown" GotFocus="canvas_GotFocus" LostFocus="canvas_LostFocus" PointerExited="canvas_PointerExited" Draw="canvas_Draw_1" >
</canvas:CanvasControl>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1"
IsTabStop="False"
Orientation="Vertical"
HorizontalAlignment="Right" Maximum="10000" Value="1000" ViewportSize="800" />
<ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False"
Orientation="Horizontal"
Grid.Row="1" />
<Border x:Name="ScrollBarSeparator" Grid.Row="1" Grid.Column="1" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"/>
</Grid>
//Maximum="10000" Value="1000" ViewportSize="800"------ is test
Hello everyone，my English is not OK. I'm using google translation.
I'm transplanting scintill to UWP. The ScrollBar is not shown in the above code. I tried using ScrollViewer+CanvasVirtualControl，but it needs to modify scintill's code in EditView .
Thanks.
There are Thumb in the layout of the following figure
Related
I'm trying to get my ItemsControl to expand to fit the grid column it is in.
This is what I'm trying to get:
This is what I'm actually getting:
I've tried StackPanel, ViewBox, WrapControl from Microsoft.ToolKit.Uwp.Controls and setting HorizontalAlignment to stretch.
I've tried converting it to a ListView.
Here's my xaml:
<Page
x:Class="PaymentScreen.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PaymentScreen"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d">
<Page.DataContext>
<local:PaymentVM></local:PaymentVM>
</Page.DataContext>
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.10*"></ColumnDefinition>
<ColumnDefinition Width="0.80*"></ColumnDefinition>
<ColumnDefinition Width="0.10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*"></RowDefinition>
<RowDefinition Height="0.30*"></RowDefinition>
<RowDefinition Height="0.65*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.66*"></ColumnDefinition>
<ColumnDefinition Width="0.33*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="Red" BorderThickness="1"></Border>
<Border Grid.Column="1" BorderBrush="Red" BorderThickness="1"></Border>
<ItemsControl Grid.Column="0" Grid.Row="1" ItemsSource="{x:Bind ViewModel.PaymentEntryLines}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:PaymentLine" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Text="To Pay:"></TextBox>
<TextBox Grid.Row="1" Text="{x:Bind AmountToPay, Mode=TwoWay}"></TextBox>
<TextBox Grid.Row="2" Text="Paid:"></TextBox>
<TextBox Grid.Row="3" Text="{x:Bind AmountPaid, Mode=TwoWay}"></TextBox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Border Grid.Column="1" Grid.Row="1">
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Text="To Pay:"></TextBox>
<TextBox Grid.Row="1" Text="300.10"></TextBox>
<TextBox Grid.Row="2" Text="Paid:"></TextBox>
<TextBox Grid.Row="3" Text="500.40"></TextBox>
</Grid>
</StackPanel>
</Border>
</Grid>
</Grid>
</Page>
What you want is an equivalent of the WPF UniformGrid, which divides its client area evenly among its children: Set Rows="1" and it arrange the children horizontally:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<somens:UniformGrid Rows="1" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Here is a frequently-recommended UWP implementation of UniformGrid.
Hey so I have a question that's been driving me mad. Basically I have a xaml element that has a wrap panel and a listbox inside it. The listbox has no problems in resizing but the wrap panel will not resize even when I set the horizontal alignment to stretch.
Has anyone any suggestions on how to fix this as it is really driving me nuts? Thanks very much in advance.
<UserControl x:Class="citeright_word.SearchItemsPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:local="clr-namespace:citeright_word"
xmlns:iconPacks1="http://metro.mahapps.com/winfx/xaml/iconpacks"
mc:Ignorable="d"
d:DesignHeight="562.5" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Resources/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label" Content="Search:" Margin="5,0,0,0"
VerticalAlignment="Top" FontSize="16" FontWeight="Bold"/>
<WrapPanel HorizontalAlignment="Stretch" Width="auto"
Margin="5,30,5,506.4">
<Button Click="refreshItems" Background="#FFF7F7F7"
VerticalAlignment="Top">
<iconPacks1:PackIconMaterial Kind="Refresh" MaxHeight="12"
MaxWidth="12"/>
</Button>
<TextBox x:Name="textBox" controls:TextBoxHelper.Watermark="Search
Items" controls:TextBoxHelper.ClearTextButton="True"
VerticalAlignment="Top"
KeyDown="textBox_KeyDown" />
</WrapPanel>
<ListBox x:Name="listBox" Margin="5,63,5,5"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</ListBox>
</Grid>
</UserControl>
Is this what you're looking for?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
x:Name="label"
Grid.Row="0"
Content="Search:"
Margin="5,0,0,0"
VerticalAlignment="Top"
FontSize="16"
FontWeight="Bold"
/>
<Grid
Margin="5"
Grid.Row="1"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
Click="refreshItems"
Background="#FFF7F7F7"
VerticalAlignment="Top"
>
<iconPacks1:PackIconMaterial
Kind="Refresh"
MaxHeight="12"
MaxWidth="12" />
</Button>
<TextBox
Grid.Column="1"
Margin="2,0,0,0"
x:Name="textBox"
VerticalAlignment="Top"
KeyDown="textBox_KeyDown"
controls:TextBoxHelper.Watermark="Search Items"
controls:TextBoxHelper.ClearTextButton="True"
/>
</Grid>
<ListBox
x:Name="listBox"
Grid.Row="2"
Margin="5"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBoxItem>DSG Global Inc (re)</ListBoxItem>
<ListBoxItem>Law Society of New Brunswick v. Aucoin</ListBoxItem>
</ListBox>
</Grid>
I made some substitutions for testing because I don't have your icons or your textbox behaviors or the stuff that goes in the listbox.
I find it deeply incongenial to do XAML layout with margins. I know the designer positions elements that way, but I only use the designer for a visual check on the XAML I write by hand. I find it vastly easier and more powerful to use Grid rows and columns, stackpanels, wrappanels, and the odd UniformGrid. I don't think it's just me: On stack overflow, I've noticed that margin-driven layout correlates very well with folks who are inexperienced with XAML.
My WPF control background color is not working in my Universal Windows app. Here is the xaml. The Grid background is working fine, for both grids. The content TextBlocks in the ItemsControl do appear. What am I missing?
<Page
x:Class="Jockusch.Calculator.WindowsStore.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Jockusch.Calculator.WindowsStore"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:system="using:System"
mc:Ignorable="d">
<Page.TopAppBar>
<CommandBar x:Name="TabBar" IsOpen="True" IsSticky="True">
<CommandBar.PrimaryCommands>
<AppBarButton Margin="100,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Right" IsEnabled="True" Name="btnNext" Icon="Next" x:Uid="AppBarNext" Label="Next1"></AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.TopAppBar>
<Grid Background="Yellow">
<Grid.Resources>
<Style TargetType="ItemsControl">
<Setter Property="Background" Value="Wheat">
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="299" />
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="366"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<local:WindowsAdAndContentWrapperView Background="Orange" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="ContentView"></local:WindowsAdAndContentWrapperView>
<Grid Background="Brown" Grid.Row="0" Grid.Column="1"/>
<ItemsControl Grid.Row="0" Grid.Column="2">
<ItemsControl.Items>
<TextBlock Text="Hello"></TextBlock>
<TextBlock Text="Where are my colors?"/>
</ItemsControl.Items>
</ItemsControl>
</Grid>
</Page>
I'm developing a custom ListBox item template and so far wrote this code:
<UserControl x:Class="Application.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Right" Height="100" Grid.RowSpan="2" Grid.Column="1" VerticalAlignment="Center" Width="100" Source="ControlTemplates\arrow_white.png"/>
<TextBlock Name="Title" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0" Height="auto" Width="auto" Grid.ColumnSpan="2" Margin="10,212,119,214"/>
</Grid>
Link to picture sample: http://s7.postimg.org/oeyl8gge3/Capture2.png
I want to make this ListBoxItem 200 px, but all content - rubber ( to support both orientations )
When i try to change d:DesignHeight="480" d:DesignWidth="480" to 200px it makes the ListBoxItem 200px but text dissapers...
What am i doing wrong?
You need to reverse the column definitions:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
This way right column will have fixed size since it is automatically resized to accommodate the Image control with fixed width. And the first column will now always stretch to use all space.
However, this is not enough. Each individual list box item has its own width. To ensure that each item has maximum width, use the following code:
<ListBo>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Ive created a simple usercontrol and even though the app runs ok applying the template to
I am defining the Control Template here
App.xaml
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ResourcesCountDown.App"
>
<Application.Resources>
<ControlTemplate x:Key="myWindowTemplate">
<Grid x:Name="myGrid" Background="Black" Width="50" Height="50">
<ContentPresenter Name="Content"></ContentPresenter>
</Grid>
</ControlTemplate>
</Application.Resources>
</Application>
My UserControl Test.xaml
<UserControl x:Class="ResourcesCountDown.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="100" Height="100" >
<Grid x:Name="LayoutRoot">
<Button Name="myButton" Template="{StaticResource myWindowTemplate}" Foreground="White" Content="CLICK" ></Button>
</Grid>
</UserControl>
My page where the user control is being used and the page where the AG E UNKOWN_ERROR occurs.
If I remove applying the template from test.xaml and remove the Template="{StaticResource myWindowTemplate}" the error goes away, so I know its something BAD in my template definition?
Mainpage.xaml
<UserControl x:Class="ResourcesCountDown.Mainpage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ResourcesCountDown="clr-namespace:ResourcesCountDown"
xmlns:sliverlightControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
Width="Auto" Height="Auto" Name="mainPage"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="False" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="80"/>
<RowDefinition Height="10"/>
<RowDefinition Height="*"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="1" Height="Auto" VerticalAlignment="Top" CornerRadius="5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFAA01"/>
<GradientStop Color="#FFFD6900" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid x:Name="TopBannerGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ResourcesCountDown:LogoControl Width="Auto" Height="Auto" Grid.ColumnSpan="2" Margin="5,0,0,0"/>
<ResourcesCountDown:MenuControl Grid.Column="2" HorizontalAlignment="Right" x:Name="menu" Margin="0,-30,0,0"/>
</Grid>
</Border>
<sliverlightControls:WrapPanel Width="900" Height="600" Grid.Column="1" Grid.Row="3" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" >
<ResourcesCountDown:noteControl Width="200" Height="200" headingText="Whats it about?" Margin="10"
noteText="We have one planet with finite resources. This web site was created to try and express the resource consumption.">
</ResourcesCountDown:noteControl>
<ResourcesCountDown:noteControl Width="200" Height="200" headingText="Latest News" Margin="10"
noteText="This week we have see some many new news in just a short time">
</ResourcesCountDown:noteControl>
<ResourcesCountDown:RSSFeed Width="600" Height="200" Margin="10" headingText="Hot News"/>
<ResourcesCountDown:datagridControl Width="600" Height="100" x:Name="theDataGrid" Margin="10" headingText="Stats" > </ResourcesCountDown:datagridControl>
<ResourcesCountDown:Test></ResourcesCountDown:Test>
</sliverlightControls:WrapPanel>
</Grid>
</UserControl>
I think you need a TargetType="Grid" on your <ControlTemplate>:
<ControlTemplate x:Key="myWindowTemplate TargetType="Grid">
....
Also, Grid isn't a ContentControl so I don't think the ContentPresenter you put in the template will behave the way you expect - it could even be causing the error.
Actually, from the code you've posted, your TargetType should be Button because you're applying the template to button.