• Welcome to the all-new Windows Central Forums! - We're still moving some things around, so you may see a few quirks here and there, but we're working on getting things fully completed as soon as possible. For now, take a look around, and if you run into any major issues, please let us know in this thread!

Need help for making image in a grid column show full grid container!!

Yang Kul

New member
Jan 9, 2014
4
0
0
I am making a quiz with answers are pics. I put them i a grid. I used story board to make each image change to full screen.But now I have 2 problems with it.
- How can I get width and height from grid container of answers and put them in storyboard?
-How can we make the image when we on hold,it will be full the grid container base on story board?
Cause I'm newbie with WP so maybe my code is not good. Please help me to solved these problems. Here is my code

In my xaml page:

Code:
<Grid Grid.Row="1" Name="layoutPortrait">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" ColumnSpan="2" Margin="10">
                <ProgressBar Name="TimeBar" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" SmallChange="0.2" Value="{Binding Timer}" Maximum="5000"/>
            </Grid>
            <TextBlock Grid.Row="1" Text="{Binding Question}" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
            
            <Grid Grid.Row="2" Margin="20">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.Resources>
                    <Storyboard x:Name="Answer0Animation">
                        <DoubleAnimation
                                Storyboard.TargetName="Answer0Image"
                                Storyboard.TargetProperty="Width"
                                From="10" To="400" Duration="0:0:2"
                                AutoReverse="False"/>
                        <DoubleAnimation
                                Storyboard.TargetName="Answer0Image"
                                Storyboard.TargetProperty="Height"
                                From="10" To="600" Duration="0:0:2"
                                AutoReverse="False"/>
                    </Storyboard>
                    <Storyboard x:Name="Answer1Animation">
                        <DoubleAnimation
                                Storyboard.TargetName="Answer1Image"
                                Storyboard.TargetProperty="Width"
                                From="10" To="400" Duration="0:0:2"
                                AutoReverse="False"/>
                        <DoubleAnimation
                                Storyboard.TargetName="Answer1Image"
                                Storyboard.TargetProperty="Height"
                                From="10" To="600" Duration="0:0:2"
                                AutoReverse="False"/>
                    </Storyboard>
                    <Storyboard x:Name="Answer2Animation">
                        <DoubleAnimation
                                Storyboard.TargetName="Answer2Image"
                                Storyboard.TargetProperty="Width"
                                From="10" To="400" Duration="0:0:2"
                                AutoReverse="False"/>
                        <DoubleAnimation
                                Storyboard.TargetName="Answer2Image"
                                Storyboard.TargetProperty="Height"
                                From="10" To="600" Duration="0:0:2"
                                AutoReverse="False"/>
                    </Storyboard>
                    <Storyboard x:Name="Answer3Animation">
                        <DoubleAnimation
                                Storyboard.TargetName="Answer3Image"
                                Storyboard.TargetProperty="Width"
                                From="10" To="400" Duration="0:0:2"
                                AutoReverse="False"/>
                        <DoubleAnimation
                                Storyboard.TargetName="Answer3Image"
                                Storyboard.TargetProperty="Height"
                                From="10" To="600" Duration="0:0:2"
                                AutoReverse="False"/>
                    </Storyboard>
                </Grid.Resources>
                <Image Name="Answer0Image" Grid.Row="0" Grid.Column="0" Source="{Binding Answers[0],Converter={StaticResource quizImagePathConverter}}" Hold="OnHold" MouseLeftButtonUp="OnMouseLeftButtonUp">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Tap">
                            <command:EventToCommand Command="{Binding AssertCommand}" CommandParameter="{Binding Answers[0]}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Image>
                <Image Name="Answer1Image" Grid.Row="1" Grid.Column="0" Source="{Binding Answers[1],Converter={StaticResource quizImagePathConverter}}" Hold="OnHold" MouseLeftButtonUp="OnMouseLeftButtonUp">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Tap">
                            <command:EventToCommand Command="{Binding AssertCommand}" CommandParameter="{Binding Answers[1]}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Image>
                <Image Name="Answer2Image" Grid.Row="0" Grid.Column="1" Source="{Binding Answers[2],Converter={StaticResource quizImagePathConverter}}" Hold="OnHold" MouseLeftButtonUp="OnMouseLeftButtonUp">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Tap">
                            <command:EventToCommand Command="{Binding AssertCommand}" CommandParameter="{Binding Answers[2]}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Image>
                <Image Name="Answer3Image" Grid.Row="1" Grid.Column="1" Source="{Binding Answers[3],Converter={StaticResource quizImagePathConverter}}" Hold="OnHold" MouseLeftButtonUp="OnMouseLeftButtonUp">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Tap">
                            <command:EventToCommand Command="{Binding AssertCommand}" CommandParameter="{Binding Answers[3]}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Image>
            </Grid>
        </Grid>

In my cs file:

Code:
private void OnHold(object sender, GestureEventArgs e)
        {
            Image img = sender as Image;
            switch (img.Name)
            {
                case "Answer0Image":
                    Answer0Animation.Begin();
                    break;
                case "Answer1Image":
                    Answer1Animation.Begin();
                    break;
                case "Answer2Image":
                    Answer2Animation.Begin();
                    break;
                case "Answer3Image":
                    Answer3Animation.Begin();
                    break;
                case "Answer0LandScapeImage":
                    Answer0LandscapeAnimation.Begin();
                    break;
                case "Answer1LandScapeImage":
                    Answer1LandscapeAnimation.Begin();
                    break;
                case "Answer2LandScapeImage":
                    Answer2LandscapeAnimation.Begin();
                    break;
                case "Answer3LandScapeImage":
                    Answer3LandscapeAnimation.Begin();
                    break;
            }
        }
        private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Image img = sender as Image;
            switch (img.Name)
            {
                case "Answer0Image":
                    Answer0Animation.Stop();
                    break;
                case "Answer1Image":
                    Answer1Animation.Stop();
                    break;
                case "Answer2Image":
                    Answer2Animation.Stop();
                    break;
                case "Answer3Image":
                    Answer3Animation.Stop();
                    break;
                case "Answer0LandScapeImage":
                    Answer0LandscapeAnimation.Stop();
                    break;
                case "Answer1LandScapeImage":
                    Answer1LandscapeAnimation.Stop();
                    break;
                case "Answer2LandScapeImage":
                    Answer2LandscapeAnimation.Stop();
                    break;
                case "Answer3LandScapeImage":
                    Answer3LandscapeAnimation.Stop();
                    break;
            }
        }
 

Yang Kul

New member
Jan 9, 2014
4
0
0
hix..64 views and no idea of anyone?..Is it hard or is it too easy and cause I'm too bad to help..:(
 

Catholic Tech Geek

New member
Feb 2, 2012
130
0
0
So..to be straight, you want to use a value of one of the grids in a storyboard somewhere and you want to have the image "stretch" to the full length of the grid when it's held, correct?
 

Catholic Tech Geek

New member
Feb 2, 2012
130
0
0
Yes, I do. At the moment, I'm not sure about the stretching on tap part, but I do know for the value for the Grid. In your xaml, you can give the grid a name and then use that with the ElementName attribute for the data binding, where the value for ElementName is the name of another component in your xaml.

Code:
[COLOR=blue]<[/COLOR][COLOR=#a31515]Binding[/COLOR] [COLOR=red]ElementName[/COLOR][COLOR=blue]=[/COLOR][COLOR=black]"[/COLOR][COLOR=blue]nameString[/COLOR][COLOR=black]" [COLOR=#ff0000]Path[/COLOR]=[COLOR=black]"[/COLOR][COLOR=blue]propertyValue[/COLOR][COLOR=black]"[/COLOR][/COLOR][COLOR=blue]/>[/COLOR]

Edit: I forgot about the path attribute. It's all fixed now.
 
Last edited:

Members online

Forum statistics

Threads
316,282
Messages
2,233,583
Members
427,375
Latest member
lisanayar