Binding to child object - windows-phone-7

I have the following code(wp7-silverlight). I try to bind a slider to those 2 controls' Angle property, but for some reason the inner control doesn't seems to receive the data, only the parent control. When I put them side by side(not nested), those work properly. Any idea why only the outer control can get the data from the slider?
<rotate:RotatableUserControl Width="400"
Height="400"
x:Name="RotatableUserControl"
Angle="{Binding ElementName=SliderObject, Path=Value}">
<Canvas Background="Red">
<rotate:RotatableUserControl Width="50"
Height="50"
x:Name="childeRotate3"
Angle="{Binding ElementName=SliderObject, Path=Value}">
<Grid Background="Yellow" />
</rotate:RotatableUserControl>
</Canvas>
</rotate:RotatableUserControl>

I am not sure why you can't bind it nested, but you could try to set the canvas Datacontext to the SliderObject and the bind the Value to the nested rotate:RotatableUserControl, that may work!
<rotate:RotatableUserControl Width="400"
Height="400"
x:Name="RotatableUserControl"
Angle="{Binding ElementName=SliderObject, Path=Value}">
<Canvas Background="Red" Datacontext={Binding ElementName=SliderObject, Path=Value}">
<rotate:RotatableUserControl Width="50"
Height="50"
x:Name="childeRotate3"
Angle="{Binding}">
<Grid Background="Yellow" />
</rotate:RotatableUserControl>
</Canvas>
</rotate:RotatableUserControl>

Related

How to Customize Button's Size?

I have problem to customize the buttons' size in my stack panel. I made one experiment with Rectangle, it looks perfect, here is the code in the XAML:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Rectangle Width="170" Height="170" Fill="Bisque" Margin="10,0,0,0" />
<StackPanel Orientation="Vertical" Margin="10,0,0,0">
<StackPanel Orientation="Horizontal">
<Rectangle Width="80" Height="80" Fill="Azure" />
<Rectangle Width="80" Height="80" Fill="Azure" Margin="10,0,0,0" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Rectangle Width="80" Height="80" Fill="Tomato" />
<Rectangle Width="80" Height="80" Fill="Azure" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</StackPanel>
Here is the screen shot:
But, when I remove those Rectangles to Buttons,
like these in the XAML:
<Button x:Name="Btn2" >
</Button>
<Button x:Name="Btn3" Width="40" Height="40" Margin="11,0,0,0" >
</Button>
it looks not what i want:
I can't resize those 2 buttons. How to get a quick solution for this?
Buttons in WP8.1 have deafault minimum width - MinWidth property - try changing it and it should help.
A side note - consider using Grid panel instead of StackPanel for positioning elements. If you define some Rows and Columns, your app should scale correctly when used on different devices.

Windows Phone cut part of element (rectangle)

I don't know how to cut center of element (do center of element clear [sorry for my english]). I think to use opacity mask but i can't create this. I need create like this
<Rectangle Fill="#FFFF0000" Height="100" Width="100" />
<Rectangle Fill="#FF00FF00" Height="100" Width="100">
<Rectangle.OpacityMask>
<ImageBrush Stretch="Fill" ImageSource="mask.png"/>
</Rectangle.OpacityMask>
</Rectangle>

How to add Text To Shapes in Blend Expressions 4?

I am looking at the shapes available in Blend Expression 4 for my WP7 app I am making. I am a bit confused though how to add text to a shape.
How do I add text to a shape?
Shapes in Blend for WP7 are simply ... Shapes.
All Expression Shapes inherits from Path, that inherit from System.Windows.Shapes.Shape. Shape is a base class for creating graphics. It supports only very basics properties such as fill, stroke, transform, ... you can not add text inside a shape because it's a pure-graphical object.
Hopefully for you, because they derive from UIElement, shape objects can be used inside panels and most WP controls. The Canvas panel is a particularly good choice for creating complex drawings because it supports absolute positioning of its child objects.
So, two examples can be
<Grid>
<es:RegularPolygon Fill="#FFF4F4F5" Height="100" InnerRadius="1" PointCount="6" Stretch="Fill" Stroke="Black" Width="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello" Foreground="black"/>
</Grid>
or
<Canvas Height="200" Width="200">
<es:RegularPolygon Canvas.Left="50" Canvas.Top="50" Fill="#FFF4F4F5" Height="100" InnerRadius="1" PointCount="6" Stretch="Fill" Stroke="Black" Width="100" />
<TextBlock Canvas.Left="75" Canvas.Top="85" VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello" Foreground="black"/>
</Canvas>

how to animate images in a stackPanel wp7

i'v developed few windows phone applications, but never interacted with the animation.
now i required a animation in a tile, the xaml is given below
<Grid Height="250">
<StackPanel Height="700" x:Name="stackPanel" VerticalAlignment="bottom">
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_f6bce20b-cb91-41d8-80fb-36524e1e6e46_ProfilePic.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_0b3b5606-8cf3-4a33-8292-e62f7785a224_tes.JPG"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_1c59768b-3419-48e4-805b-e78ca8d82b71_d.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_f6bce20b-cb91-41d8-80fb-36524e1e6e46_ProfilePic.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_0b3b5606-8cf3-4a33-8292-e62f7785a224_tes.JPG"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_1c59768b-3419-48e4-805b-e78ca8d82b71_d.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_f6bce20b-cb91-41d8-80fb-36524e1e6e46_ProfilePic.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_0b3b5606-8cf3-4a33-8292-e62f7785a224_tes.JPG"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_1c59768b-3419-48e4-805b-e78ca8d82b71_d.jpg"></Image>
</StackPanel>
</Grid>
in above the Grid (Height = 250) contains a stackPanel (Height = 500) which contains some images, but Grid's height is less than stackPanel's height, so all images in stackPanel cant be shown at a time, so i want to rotate this stackPanel in upwards/downwards , more illustrative diagram is given below
any help to appreciate ?
thanks

Is there any way to get XAML element by Tag property?

Is there any way to get the XAML element by its tag value??
My code is like this :
<Grid Tap="StackPanel_Tap" Tag="{Binding Type}" >
<Border BorderThickness="0" CornerRadius="0" BorderBrush="White" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1" >
<Image Tag="{Binding Type}" Source="{Binding Location}" Opacity="1" Width="100" Height="100" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True" >
</Image>
</Border>
</Grid>
I am binding Tag Property for Grid , is there any way to get an object of Grid by using Tag Propertty??
Sorry for less information the thing is grid is in ListBox ..
How can i Access The Grid Object??
Thanks and Reagrds
Yashavantha
Create a recursive method which uses System.Windows.Media.VisualTreeHelper to get all children of the page. For each child test if it's of type Grid and if it has a Tag equal to whatever you're looking for.

Resources