I want to get the background of spesific area of ContentControl.
Here is my ContentControl ;
The area I would like to have is (topright of the ContentControl) ;
How can I do that?
Put your content control into another content control and set the horizontal and vertical position to topright. In the following example I use an image in a grid.
<Grid>
<Image
x:Name="MyImage"
Height="22"
HorizontalAlignment="Right"
Margin="10"
VerticalAlignment="Top"
Width="22" />
</Grid>
Related
I have a stack panel and it has one grid and I'd like the grid to have same height as stack panel.
I tried playing with VerticalAlignment stretch or height 100% nothing works
I tried setting the values programatically OnNavigatedTo but it doesn't have the effect
Any suggestions to resolve this are welcome
Please find the code below
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" Orientation="Vertical" Name="ProgressOverlay">
<Grid Name="Overlaygrid"">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Foreground="Black" FontSize="25” T HorizontalAlignment="Center" Text="Loading"/>
</StackPanel>
</Grid>
</StackPanel>
A StackPanel takes by default the size needed by its content and shrinks to the size required, while a container control like Grid stretches to the full size available (e.g full page).
If you want to keep the outer StackPanel, you will have to set VerticalAlignment="Stretch" on the StackPanel, not on the Grid.
But since the Grid is the only single content item in your outer StackPanel, you can remove it and move the properties Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" to the Grid. Always try to keep your XAML structure as simple as possible.
In my WP 8.1 app I have the MapControl:
<Maps:MapControl x:Name="mapControl" ZoomLevelChanged="mapControl_ZoomLevelChanged" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1">
<Maps:MapItemsControl x:Name="MapIcons" ItemsSource="{Binding}" >
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
</StackPanel>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>
On the map I got markers, and when I click one of them, "contentGrid" apears. The code for that behavior:
private void myStack_Tapped(object sender, TappedRoutedEventArgs e)
{
StackPanel s = sender as StackPanel;
Grid contentBox = s.FindName("contentGrid") as Grid;
contentBox.Visibility = Visibility.Visible;
}
I want to see "contentGrid" always above other markers, but some of them are above my "contentGrid". I tried to set Canvas.Zindex property in XAML in "contentGrid", but it's not working.
I attach screenshot to exemplify my problem.
The StackPanel stacks vertically (by default) or horizontally.
If you want children of the StackPanel in "different layers",
you 'd better replace the StackPanel of the DataTemplate with a Grid or Canvas
A simple solution is to
<DataTemplate>
<Grid Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
Writing the Image in the XAML before the Grid puts it under graphically.
Last, you can play with the ZIndex if you add other controls are added to the Grid/Canvas.
Otherwise I am not sure the ZIndex is really necessaray
EDIT
Canvas.ZIndex is an attached property of Canvas.
But surprisingly it works with the Grid !
The greater Zindex is, the closer the control to your eye (over the other controls)
Regards
In WPF I have ContentControl that has limited size (lets say 100x30). A Content of this ContentControl is a Label of size 200x30 so the whole Label cannot be visible within the ContentControl.
How can I programatically set which area of the Label is visible in ContentControl ? The visible area (rectangle) of the content may change over time. Can I do this without using ScrollViewer (just to set visible clip) ?
EDIT: Well then, I am not even able to do it using ScrollViewer so any advice on that would be appriciated as well
You can place your label on canvas and move it using Canvas.Left property.
Small example where label's position is adjusted using binding to a slider Value property.
<ContentControl Width="100" Height="30">
<Canvas ClipToBounds="True">
<Label Canvas.Left="{Binding ElementName=mySlider, Path=Value}" Width="200" Height="30">Here is some very long sample text </Label>
</Canvas>
</ContentControl>
<Slider Name="mySlider" Minimum="-200" Maximum="100" />
I have a Panorama Control and inside it is a DataTemplate and inside the DataTemplate is an Image control. I want to get the Image control of the selected item to change it to something else. The xaml code is like this:
<controls:Panorama x:Name="FeedsPanorama" FontSize="20">
<controls:Panorama.ItemTemplate>
<DataTemplate x:Name="ItemDataTemplate">
<Grid d:DesignWidth="460" d:DesignHeight="700" Width="Auto" Height="Auto">
<Image HorizontalAlignment="Left" Height="118" Margin="2,8,0,0" VerticalAlignment="Top" Width="167" x:Name="ImageThumbnail" Source="{Binding SummaryImageLink}" />
</Grid>
</DataTemplate>
</controls:Panorama.ItemTemplate>
</controls:Panorama>
For example, every items will have their own images, but when it is selected, I will change the image to something else and then change back to it own image.
You need to get the actual container using the ItemContainerGenerator of your control:
FeedsPanorama.ItemContainerGenerator.ContainerFromItem(currentDataObject);
Is there a way to zoom a viewbox content, excpet for one control?
I have a viewbox with a grid, and in this grid I have some controls and I'm trying to zoom all the controls in the viewbox except one, is it possible?
Many thanks,
Paulo
You can use a grid to add layers to your layout. That way, you can zoom one set of items, and leave another set un-zoomed.
<Grid>
<Viewbox>
<!-- Controls to zoom -->
</Viewbox>
<!-- Control to exclude from zoom -->
</Grid>
The order of the view box and the other controls in XAML will depend upon which layer appears on top.
If that doesn't quite do what you want, leave a comment and I'll revisit the answer.
EDIT You want the unzoomed control to be positioned relative to the (0,0) of the Viewbox. That will happen in this situation because both children of the grid are in cell (0,0) which means that their top-left corners are aligned. Can you give an example of what you have in XAML, and what's wrong with it (perhaps edit your original question)?
Here's some XAML to try:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Grid>
</Page>
That gives a layout like this:
http://img20.imageshack.us/img20/2045/layout1m.png
But note that when the height is reduced, the grid becomes wider than the view box, and so the content is layed out like this:
http://img20.imageshack.us/img20/9397/layout2i.png
I guess that's not what you want. In that case, you use a canvas and go for something like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<Canvas>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Canvas>
</Grid>
</Page>
Which looks like this:
http://img20.imageshack.us/img20/6743/layout3i.png