I have this grid:
<UserControl
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Background="#FF341616">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse
Name="Red"
Grid.Row="0"
Margin="10,10,10,10"
Grid.Column="0"
Fill="#73b43c"/>
</Grid>
</UserControl>
but when it scales, it distortes.
How can I fix it? I don't want to replace it with an image.
If you want something to scale without distorting, put it inside of a Viewbox:
<Viewbox Grid.Row="0" Grid.Column="0" Margin="10,10,10,10">
<Ellipse Name="Red" Width="100" Height="100" Fill="#73b43c"/>
</Viewbox>
The Stretch property of the Viewbox can be set various values, depending on how you want the content to stretch. You probably want Uniform, which would look like this:
Related
<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
I have a list of labels and values. For instance (this sample is for illustrative purposes):
Tim 0.333
Fred 0.357
Fernando 0.300
I would like to be able to add to this list and have the text shrink so the list will fill the available space but not exceed it. I would also like to be able to resize the window and have the list fill the available space. I tried using a Viewbox to accomplish this and failed in two different ways:
1) I tried using a grid and surrounding each label and value with a Viewbox. This maintained my spacing between the label and value, but the labels and values were different sizes. Here is the code for the user control that displays the player information:
<UserControl x:Class="Viewbox.Player"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0">
<TextBlock FontSize="30" Margin="5" Text="{Binding Name}" HorizontalAlignment="Left"/>
</Viewbox>
<Viewbox Grid.Column="1" HorizontalAlignment="Right">
<TextBlock FontSize="30" Margin="5" Text="{Binding Average, StringFormat={}{0:0.000}}" HorizontalAlignment="Right"/>
</Viewbox>
</Grid>
</UserControl>
And here is the result:
2) I tried surrounding the grid with the Viewbox. This sized the text as I wanted, but now my spacing was gone and each line was centered.
<UserControl x:Class="Viewbox.Player"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Viewbox>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontSize="30" Margin="5" Text="{Binding Name}" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" FontSize="30" Margin="5" Text="{Binding Average, StringFormat={}{0:0.000}}" HorizontalAlignment="Right"/>
</Grid>
</Viewbox>
</UserControl>
I have been dancing around this issue for a while now. Can anyone help me with this?
Thanks!
I was able to solve the problem by inserting a blank column. This preserves the alignment and font sizes (up to a point):
<UserControl x:Class="Viewbox.Player"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0">
<TextBlock Margin="5" Text="{Binding Name}" HorizontalAlignment="Left"/>
</Viewbox>
<Viewbox Grid.Column="2">
<TextBlock Margin="5" Text="{Binding Average, StringFormat={}{0:0.000}}" HorizontalAlignment="Right"/>
</Viewbox>
</Grid>
</UserControl>
Unfortunately, it breaks down a bit when the window is sized very tall:
However, for my purposes, I am able to limit the total height, so this is not a problem.
i have not able to achieve horizontally scroll zoomed image... vertical zoom is successful using this Xaml... Kindly help solving horizontal scroll of a zoomed image FOR windows phone 8.1 u1...
REGARDS
enter code here <Page
x:Class="Bus_Time.BasicPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Bus_Time"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
<TextBlock Text="MY APPLICATION" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>
<TextBlock Text="page title" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>
<Grid Margin="0,8.833,0,10" Grid.Row="1">
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="0.8" Height="Auto" Width="Auto">
<StackPanel Height="Auto" Width="Auto" Orientation="Vertical" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Enabled" HorizontalAlignment="Stretch">
<Image Source="Assets/Image1/0001.jpg" HorizontalAlignment="Stretch" Height="350" Width="380"/>
<Image Source="Assets/Image1/0002.jpg" HorizontalAlignment="Stretch" Height="350" Width="300"/>
<Image Source="Assets/Image1/0003.jpg" HorizontalAlignment="Stretch" Height="350" Width="380"/>
<Image Source="Assets/Image1/0004.jpg" HorizontalAlignment="Stretch" Height="350" Width="380"/>
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
Are you sure that the content doesn't fit in your ScrollViewer? Width of the images is 380, that's less than a page size for Windows and Windows Phone alike.
Anyway, you can try setting HorizontalScrollBarVisibility to Auto or Visible.
I have this kind of element:
Xaml:
<UserControl
x:Class="App1.CustomControls.ApplicationTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid x:Name="Grid">
<Grid.Background>
<SolidColorBrush Color="#FF0353AE" Opacity="0.8"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,3,0,0" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch">
<Border.BorderBrush>
<SolidColorBrush Color="#FF023B7B" Opacity="0.8"/>
</Border.BorderBrush>
<Image Margin="14,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="../Assets/icn-download#2x.png"/>
</Border>
<Border BorderThickness="3,3,3,0" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch">
<Border.BorderBrush>
<SolidColorBrush Color="#FF023B7B" Opacity="0.8"/>
</Border.BorderBrush>
</Border>
<Border BorderThickness="0,3,0,0" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="2" VerticalAlignment="Stretch">
<Border.BorderBrush>
<SolidColorBrush Color="#FF023B7B" Opacity="0.8"/>
</Border.BorderBrush>
<Image Margin="14,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="../Assets/btn-training#2x.png"/>
</Border>
</Grid>
</UserControl>
On my form i have a stack panel:
<StackPanel x:Name="TestStack"/>
My element stretches horizontaly, but i want it also to automattically stretch vertically, example:
Element is 200x200 px, so if stack panel is 1000px width, than element resizes to 1000x1000px
How to achieve this?
I could do it like:
CustomElement CE = new CustomElement();
CE.Heigth = TestStack.Width; //But width isn't set, because it is HorizontalAligment=Stretch
I solved this adding a SizeChanged event to my UserControl
<UserControl x:Class="MyUserControl"
SizeChanged="UserControl_SizeChanged">
<!-- ... -->
and setting Height while changing the Width.
private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (Math.Abs(e.NewSize.Width - e.PreviousSize.Width) > 0)
Height = e.NewSize.Width;
}
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>