- 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:
In my cs file:
- 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;
}
}
Facebook
Twitter
Instagram