I have an Image control in a Grid that is displayed when the user clicks on an image in a list. I want to add an InkCanvas control directly on top of the Image control so the user can draw on it.
However, it seems like the height and width of the InkCanvas is not being bound correctly to the image and I am able to draw outside the image. What else do I need to do?
My XAML code:
<Grid>
<Image x:Name="result_img" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<InkCanvas x:Name="inkCanvas" x:Load="False" Height="{x:Bind result_img.ActualHeight}" Width="{x:Bind result_img.ActualWidth}"/>
</Grid>
Code-behind (C++/CX):
void MyGui::test::ListView_ItemClick(Platform::Object^ sender, Windows::UI::Xaml::Controls::ItemClickEventArgs^ e)
{
this->FindName("inkCanvas");
inkCanvas->InkPresenter->InputDeviceTypes = CoreInputDeviceTypes::Mouse;
}
Any help would be much appreciated!
If you want to use element-to-element binding,you should use the ElementName property.The ElementName is the name of the control you want to bind and the Path is the property of the control you want to bind.
<Image x:Name="result_img" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="400" />
<InkCanvas x:Name="inkCanvas" x:Load="False" Height="{Binding ElementName=result_img, Path=ActualHeight}" Width="{Binding ElementName=result_img, Path=ActualWidth}"/>
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 XAML:
<phone:Pivot Name="pivot" SelectionChanged="pivot_SelectionChanged">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<ViewportControl Name="viewport">
<Canvas Name="canvas">
<Image Name="image"
RenderTransformOrigin="0,0"
CacheMode="BitmapCache"
Source="{Binding ImageSource}">
<Image.RenderTransform>
<ScaleTransform x:Name="xform"/>
</Image.RenderTransform>
</Image>
</Canvas>
</ViewportControl>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Can I get current ViewportControl, Canvas, etc for selected item? For example
private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//get ViewportControl, Canvas, etc
}
Not necessarily with SelectionChanged, may have other solutions?
Yes, but you have to search for them. You need to use VisualTreeHelper and hunt for children of the desired type.
Or you can have some mapping in the code-behind for all controls and the parent pivot items.
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.)
For a windows 8 Apps, i need to put a list of buttons over an image. Each button has CoordinateX and CoordinateY properties. I use a gridView to bind to the list of buttons.
I need to have the result as below:
Here is my code:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" >
<Canvas>
<Image Source="ms-appx:///Assets/red.png" Stretch="None" ></Image>
<GridView ItemsSource="{Binding Buttons}"
SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="Button" Padding="0">
<GridView.ItemTemplate>
<DataTemplate>
<Button Width="194" Height="51" Background="Gray" Canvas.Left="{Binding CoordinateX}" Canvas.Top="{Binding CoordinateY}"></Button>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Canvas>
</Grid>
But this is what i get after running the app:
Ites Likely that at runtime before the X and Y co-ordinates can be set for the items within the GridView, the GridView itself has its properties applied.
Since
1) the GridView is intended to be used for oganization control
and
2) you havent forced the Grid to fill the view space
what you're left with is a GridView that acts as it wishes and limits the ability of its items to conform to your style, should the style attempt to force the items collection to live outside the bounds of the control.
You could try to set the GridView's Horizontal Alignment property but even if it happens to work, its probably a better bet to use a less organized content control like the more basic ItemsPresenter.
Which ever control you end up using... make sure to check for /set the HorizontalContentAlignment & VerticalContentAlignment properties if they exist.
I was wondering if it's possible to bind the image path when using an Image as the Panorama Title, the reason why I need a bind for the Source is that when the user have the phone background to "white" the logo would be black, and vice versa.
This is the code I'm using:
<controls:Panorama.TitleTemplate>
<DataTemplate>
<Image Source="/PanoramaApp5;component/Images/logo.png" Margin="14,105,0,10" HorizontalAlignment="Left" Name="logo" Stretch="Fill" VerticalAlignment="Top" Width="700" Height="70"/>
<!--<TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="100" Margin="10,50,0,0" />-->
</DataTemplate>
</controls:Panorama.TitleTemplate>
If I let the default Title (which is text), it will work just fine, but I need it as an image.
Just set an empty binding for your image source, then assign it using the Title property of your panorama:
<controls:Panorama x:Name="Panorama">
<controls:Panorama.TitleTemplate>
<DataTemplate>
<Image Source="{Binding}" />
</DataTemplate>
</controls:Panorama.TitleTemplate>
</controls:Panorama>
Then from the code behind:
this.Panorama.Title = new Uri("uri of your picture");
Just to provide an example of a working version, Facebook uses this same method in the header of their Windows Phone application and instead of user binding they automatically pull photos of the user to stick together and use in the pano