In my Windows 8 ItemDetail view, I want to add an overlay image to the standard image which is contained inside an InlineUIContainer element.
This is the xaml I am using:
<Paragraph LineStackingStrategy="MaxHeight">
<InlineUIContainer>
<Grid x:Name="MediaGrid" Width="560" Height="315" Margin="0,20,0,10">
<Grid.Background>
<ImageBrush ImageSource="{Binding Image}" Stretch="UniformToFill" />
</Grid.Background>
<Button Click="Button_Click" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
<Button.Template>
<ControlTemplate TargetType="Button">
<Image x:Name="OverlayImage" Visibility="{Binding ShowVideo, Converter={StaticResource booleanToVisibilityConverter}}" Source="ms-appx:///Assets/play-icon.png"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</InlineUIContainer>
</Paragraph>
This works perfectly when the app is in landscape mode. However as soon as I rotate, or open the app in portrait mode I receive the error:
WinRT information: Cannot resolve TargetName image. Additional information: Unspecified error in LayoutAwarePage.cs VisualStateManager.GoToState(control, DetermineVisualState(ApplicationView.Value), false);
Does anyone have any idea why? After a little process of elimination, it seems to happen when I have a Grid inside the InlineUIContainer.
Looks like a control name 'image' is missing and is only triggered when the VisualState is changed
Related
I have an image that is the stretched to be the size of the window (width and height wise).
I have a button that sits on top with the following XAML:
<Image Source="sample.png"></Image>
<Button Height="50" Width="100" Content="OverLay Image" Foreground="AliceBlue"
Background="Transparent" HorizontalAlignment="Left"
VerticalAlignment="Top"/>
This shows the button fine when I run, however, I'd like the button to have an image instead of text using this template:
<Button Height="50" Width="100" Content="OverLay Image"
Foreground="AliceBlue" Background="Transparent"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Button.Template>
<ControlTemplate>
<Border>
<Image Source="img/sample.png"
Width="32"
Height="32"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
When I add the template section:
<Button.Template>
<ControlTemplate>
<Border>
<Image Source="img/sample.png"
Width="32"
Height="32"/>
</Border>
</ControlTemplate>
</Button.Template>
The button disappears. Has anyone seen this before or know how to force the button to show?
Thanks in advance!
It could be nothing, but I noticed that in your first (working) example of the Image, you used this path to your image:
<Image Source="sample.png"></Image>
But the one that you say doesn't work is using this path:
<Image Source="img/sample.png"/>
Maybe that was just an error you made copying it here, but otherwise, try this in your ControlTemplate:
<Image Source="sample.png"/>
Since you've changed the ControlTemplate it will only show your image. Everything looks fine, are you sure that the image path is correct? Try setting the background of the border to make sure that there isn't anything wrong with your template. Use Snoop to get look at the VisualTree and look at the source of the image.
I would like to add shadows outside tiles in my WPF application, but when I do, the text inside tiles is blurry. I tried this solution: WPF DropShadowEffect Causing Blurriness , but unfortunately shadow effect seems not to work at all. Are there any special attributtes in Rectangle which should be set? Could you give me some clues?
i got the same issue and solved this by using UseLayoutRounding="True"
EDIT
<Grid UseLayoutRounding="True" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.Effect>
<DropShadowEffect ShadowDepth="0"
Color="Black"
BlurRadius="20" />
</Grid.Effect>
<!-- your content -->
<Grid Background="White">
<TextBlock Text="Test" FontSize="20" Margin="10" />
</Grid>
</Grid>
results this
hope that helps
I am developing a Windows Store application with C# and XAML in which I have an image being displayed on user screen. On certain event I want to change its position on screen to the coordinates of my choice.
I have tried
Canvas.SetLeft(selectedImage, screenCoords.X);
Canvas.SetTop(selectedImage, screenCoords.Y);
and
selectedImage.SetValue(Canvas.LeftProperty, screenCoords.X);
selectedImage.SetValue(Canvas.TopProperty, screenCoords.Y);
But they are not working. I have also tried updating the layout after this. can anyone tell me what exactly am I doing wrong here?
Here is the XAML code:
<FlipView.ItemTemplate>
<DataTemplate>
<Grid x:Name="cv">
<Image x:Name="img1" Source = "{Binding ModelImage}" Stretch="Fill" Tag="{Binding ModelTag}" Tapped="ModelTapped"/>
<Image x:Name="hat" Source = "{Binding HatImage}" Width="{Binding HatWidth, Mode=TwoWay}" Height="{Binding HatHeight, Mode=TwoWay}" Stretch="Fill" ManipulationMode="All" ManipulationDelta="ResourceImage_ManipulationDelta" Tapped="imageTapped" Tag="{Binding hatTag}" Canvas.ZIndex="3">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
I have several images in the grid named 'cv', just removed them for simplicity. selectedImage in above C# code is one of the images in the grid 'cv'.
I solved the issue by translating my image to the desired points using RenderTransform property.
I have a MediaElement object in my XAML, which loads my movie just fine. What I want to do is render the play, pause and stop buttons right in the center my MediaElement object, kind of like how if you embed a YouTube video on a web page, you get the big play button in the center of the video. Can I do this in WPF using MediaElement?
In case anyone else ever needs to do this, I figured it out. I simply created a Canvas and stuck the MediaElement and the Button both inside the Canvas. I then used ZIndex to change the ZOrdering so the button was on top. Finally, I centered the button on top of my movie. Here is the XAML:
<StackPanel Orientation="Horizontal" Background="LightGray" DockPanel.Dock="Bottom" Height="100">
<Canvas Width="100">
<Button Canvas.ZIndex="2" Canvas.Left="42" Canvas.Top="35">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Polygon Points="0,0 0,26 17,13" Fill="#80000000" Stroke="White" />
</ControlTemplate>
</Button.Template>
</Button>
<MediaElement Canvas.ZIndex="1" Canvas.Top="0" Canvas.Left="0"
x:Name="mediaElement1" UnloadedBehavior="Manual" LoadedBehavior="Manual" ScrubbingEnabled="True"
Loaded="mediaElement1_Loaded" Width="100" Height="100">
</MediaElement>
</Canvas>
</StackPanel>
Or you need to place mediaElement and Buttons to same Grid and set Canvas.ZIndex to higher number than 0:
<Grid>
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Height="50" Width="100" Canvas.ZIndex="1">Button</Button>
<MediaElement Source="/Assets/ladybug.wmv">
</MediaElement>
</Grid>
(actually you don't need Canvas [works on UWP]):
I am switching to using a ProgressBar/Grid in the Frame of my application instead of via a Popup. I used this stack overflow post to get it working : Dynamic Progress bar In WP7
However, When using the example I no longer have page transitions. It will be hard for me to warrant the use of it if page transitions will not work properly. Is there something I'm missing? I tried setting the TargetType to "TransitionFrame", but that does not work properly and throws a XAML parse exception (for the namespace Microsoft.Phone.Controls.PhoneApplicationPages)
<ControlTemplate x:Key="LoadingIndicatorTemplate" TargetType="toolkit:TransitionFrame" >
<Grid x:Name="ClientArea">
<ContentPresenter />
<Grid x:Name="ProgressGrid" Background="Black" Opacity="0.85" Visibility="Collapsed" Loaded="ProgressGrid_Loaded">
<StackPanel x:Name="Loading" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10">
<TextBlock HorizontalAlignment="Center" Name="tbLoading" Text="Loading" Style="{StaticResource TextNormalStyle}" />
<ProgressBar Style="{StaticResource PerformanceProgressBar}" HorizontalAlignment="Center" Name="pbLoading" Width="400" Margin="10" IsIndeterminate="False" />
</StackPanel>
</Grid>
</Grid>
</ControlTemplate>
For using the Toolkit's TransitionFrame for page transitions as well as a custom ControlTemplate to show your progress bar, you must specify the TargetType for the ControlTemplate as toolkit:Transitionframe where toolkit is defined as:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
The rest of the problem is that your ControlTemplate does not specify the template parts that the TransitionFrame requires. It requires two parts of type ContentPresenter named FirstContentPresenter and SecondContentPresenter. Change your ControlTemplate to the following to bring page transitions back:
<ControlTemplate x:Key="LoadingIndicatorTemplate" TargetType="toolkit:TransitionFrame">
<Grid x:Name="ClientArea">
<ContentPresenter x:Name="FirstContentPresenter" />
<ContentPresenter x:Name="SecondContentPresenter" />
<Grid x:Name="ProgressGrid"
Background="Black"
Opacity="0.85"
Visibility="Collapsed"
Loaded="ProgressGrid_Loaded">
<StackPanel x:Name="Loading"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="10">
<TextBlock x:Name="tbLoading"
HorizontalAlignment="Center"
Text="Loading"
Style="{StaticResource BoaTextNormalStyle}" />
<toolkit:PerformanceProgressBar x:Name="pbLoading"
HorizontalAlignment="Center"
Width="400"
Margin="10"
IsIndeterminate="False" />
</StackPanel>
</Grid>
</Grid>
</ControlTemplate>
NOTE: Jeff Wilcox's PerformanceProgressBar is now part of the Silverlight Toolkit, so you can use it directly as shown above.
If you're putting the progressbar on the frame but then animating the page then the animation won't include the progressbar.
Why not just put the progressbar on the page?