I've searched accross the Internet to solve the follow problem, but unfortunately I didn't found any working solution.
My goal is to have an ImageBrush with an image x-repeating at the bottom of the object which is using the brush. Additional the brush shall have a transparent margin, so the repeated Images shall not "touch" the container's border.
Currently I'm able to repeat an image x- and y-axis (and there I'm stuck ...). That for I use the following XAML:
<ImageBrush
x:Key="MandatoryIndicator"
ImageSource="image.png"
Stretch="None"
TileMode="Tile"
ViewportUnits="Absolute"
Viewport="0,0,16,16"
AlignmentY="Bottom"/>
And it Looks like this:
And I like to have it like this:
If you know how I have to modify my brush XAML, that would be great c[~] =)
You may use a VisualBrush with two nested elements like shown below. The outer Border (or some other outer element) is necessary for the transparent margin.
<VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Bottom">
<VisualBrush.Visual>
<Border Background="Transparent"
Width="{Binding ActualWidth,
RelativeSource={RelativeSource AncestorType=FrameworkElement}}">
<Rectangle Margin="10" Height="16">
<Rectangle.Fill>
<ImageBrush ImageSource="image.png" TileMode="Tile"
Viewport="0,0,16,16" ViewportUnits="Absolute"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</VisualBrush.Visual>
</VisualBrush>
Related
I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.
I have a Grid with an Image inside a ScrollViewer. The user needs to be able to zoom in and out of the image. The problem is when I zoom the scrollviewer seems to snap back to the left side of the image although I want the viewer to stay at the zoomed position. The XAML code looks like this
<ScrollViewer Name="ScrollViewer" HorizontalSnapPointsType="None" VerticalSnapPointsType="None" ZoomSnapPointsType="None">
<Grid x:Name="RenderedGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image x:Name="RenderedImage" Stretch="Fill" />
<canvas:CanvasControl Name="DrawingCanvas" Draw="CanvasControl_Draw" ClearColor="Transparent"/>
</Grid>
</ScrollViewer>
I thought it would be enough with setting the SnapPointType to "None", but that doesn't seem to work.
I wrote a blog post exactly about this issue: Why is my zoomable ScrollViewer snapping the image to the left?
The first part of the problem is the ScrollViewer itself, it needs the HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto.
<ScrollViewer ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="4"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
For that to really work, you'll need to limit the Image size to some width/height, like this:
<Image Source="{Binding ImageUri}"
MaxWidth="{Binding DataContext.PageWidth, ElementName=MyPage}"
MaxHeight="{Binding DataContext.PageHeight, ElementName=MyPage}"/>
You can find more details in my blog post, and full source code on GitHub.
I'm creating a basic application to test some functionality in a XAML based Windows 8 app.
I have created the following structure to simplify my example but in the real app it'll be more complex:
<Page
x:Name="pageRoot"
x:Class="ScrollingTest.Xaml.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScrollingTest.Xaml"
xmlns:common="using:ScrollingTest.Xaml.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden" Margin="0,0,0,10" VerticalContentAlignment="Stretch" BorderBrush="#FF0BC8FF" BorderThickness="1" Grid.Row="1" >
<Frame Content="Frame" Name="theFrame" Margin="100" Width="3000" BorderBrush="Red" BorderThickness="1"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
</Grid>
</Page>
The page, which is loaded into the Frame is of variable height (it contains a listview).
The issue is that as the height of the sub-page increases, so does the height of the ScrollViewer, meaning that the content is forced off the bottom of the screen.
What I'd want to achieve is horizontal scrolling for the parent but then use vertical scrolling on the sub-page. In the real application there will be many sub-pages, probably within a grid.
It seems that putting the frame inside a ScrollViewer breaks the frame's internal scrolling capabilities.
If anyone could let me know of either a better way to achieve my end result or of some property I need to change then I'd be very grateful.
I ended up using the solution from the following comment:
XAML: Limiting size of control nested in ScrollViewer (to scroll nested within the ScrollViewer)
Height="{Binding ElementName=scrollViewer, Path=ActualHeight}"
Not really what I wanted as this doesn't cope automatically when changing the orientation but it will have to do.
The other option is to handle the SizeChanged event of the page and update the height from the event handler (theFrame.Height = scrollViewer.ActualHeight). That way it copes with changing the orientation as well.
I try to understand how windows phone viewport control Bounds work.
So i can give
viewport.Bunds = new Rect(x,y,width, height);
but what that bound stand for is it a scrollable area in the viewport.
Can anyone give me a working simple example of it cause whenever i try to use this parameter i can't scroll in viewport whatsover
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<ViewportControl Name="tuzik" Bounds="0,0,300,400" Margin="66,117,20,41" >
<Canvas Name="canvas">
<Image Name="TestImage" Source="Assets\testimage.jpg"
HorizontalAlignment="Left" VerticalAlignment="Top"
Canvas.Left="-379" Canvas.Top="-769" Stretch="Fill" />
</Canvas>
</ViewportControl>
<Rectangle x:Name="rect" Width="300" Height="400" Margin="60,111,63,0" Stroke="Aqua" />
</Grid>
I believe your problem is the Canvas within the ViewportControl. Canvas does not expand to fill the ViewportControl and will not expand to contain the contents, either. You have to set a Width and Height on the Canvas.
(At least, that's how I have mine setup.)
I'm Trying to design the Conversation View for a chat Application in windows 8 Metro App. I'm new to xaml designs, how to set the Conversation view like the image below,
Although at first time it seems this layout can be fit into Grid with three columns, I'm sure you would need scrolling at some point. So, you can just use Canvas, which allows free-floating controls. Place them with Canvas.Left and Canvas.Top attached properties.
Update: an illustration of what I mean:
<Canvas Width="300" Height="200">
<Border Width="40" Height="40" Canvas.Left="10" Canvas.Top="60" Background="Red"/>
<Border Width="160" Height="80" Canvas.Left="60" Canvas.Top="60" Background="LightGray"/>
<Border Width="40" Height="40" Canvas.Left="250" Canvas.Top="150" Background="Red"/>
<Border Width="160" Height="30" Canvas.Left="80" Canvas.Top="150" Background="LightGray"/>
</Canvas>
Let's pretend that red borders are user pics (put Image inside) and gray borders are messages (put RichTextBlock inside.) Canvas allows you to shift those blocks freely.