i have an image which i am adding it as content for a button. However the window is not getting rendered properly. How can i modify the XAML so that the button shape and color remains hidden but the traiangular image added to the button is displayed.
All you have to do is create a template with only an image and set the button template to it
<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image Source="ImageSource.jpg"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Template="{DynamicResource ImageButtonStyle}"/>
Of course you need to redo all the animations like IsPressed, MouseOver, etc.
Related
I am yet again struggling with UWP. It seems that I am unable to cascade Styles within Styles. Is this something else that is not allowed in UWP?
This is what I am trying to do...
<Style x:Key="MainMenuRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Backgroud" Value="Grey"/>
<Style.Resources TargetType="TextBlock">
<Setter Property="Margin" Value="12,0,0,0"/>
</Style.Resources>
</Style>
However, VS2015 complains that the <Style.Resources> is invalid. I do not want to have to individually style the TextBlock within my RadioButton's content.
Cascading within styles not supported in UWP (or XAML in general). What you usually do is split up re-usable styles/properties and reference those.
<Thickness x:Key="MyMargin">"12,0,0,0"</Thickness>
<Style x:Key="MainMenuRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="Grey"/>
<Setter Property="Margin" Value="{StaticResource MyMargin}" />
</Style>
What you try to achieve is 'alter' the template of a RadioButton. You can find the full template here: https://msdn.microsoft.com/en-us/library/windows/apps/mt299147.aspx. If you dig into the template, you'll see this piece of code:
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Grid.Column="1"
AutomationProperties.AccessibilityView="Raw"
TextWrapping="Wrap" />
This is the part that's showing the actual content of your RadioButton and as you can see it's not a TextBlock, but a ContentPresenter (which will show text as if it was a TextBlock). The good news is that this control has a Margin property, which takes the value of the Padding property from the template. So to achieve what you want, you can simple fill in this property:
<Style x:Key="MainMenuRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="Grey"/>
<Setter Property="Padding" Value="{StaticResource MyMargin}" />
</Style>
If you want to change properties that are not available in the default template, then you'll have to create your own template.
I'm trying to convert old Window phone 7.5 Silverlight Application to new WinRT Universal application and I have problems with this pice of code:
<Style TargetType="Button">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Active}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
I used DataTrigger to set visibility of control based on binding value.
In Windows Phone 8.1 winrt app this functionality is out. I've tried with VisualStates to achieve same functionality but I can't figure it out. Can anyone help me or direct me with good example. I'm stuck here with this...
DataTriggers are not available currently in WinRT, you have couple of options instead:
use VisualStateManager,
use Behaviours managed API, for example like this:
<Button xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</Button.Style>
<i:Interaction.Behaviors>
<ic:DataTriggerBehavior Binding="{Binding Active}" Value="True" ComparisonCondition="Equal">
<ic:ChangePropertyAction PropertyName="Visibility" Value="Visible"/>
</ic:DataTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
or you can just use binding with apropriate converter:
<Button Visibility="{Binding Active, Converter={StaticResource BoolToVisibility}}"/>
I'm using a pivot control and binding my collection of images to it. I'm having a problem with alignment of the photos.
If all the photos are landscape, they align at the top, and I am unable to use the gesture control anywhere below the photo.
If they are a mix of portrait/landscape, the images appear ok, until I rotate the device. Then the portrait images are extremely zoomed in, and the landscape images are located half way down the screen.
I'm new to WP7 development and the layout is still pretty foreign to me. Any assistance would be appreciated. I'm sure someone has to have created a basic photo viewer like this....
<controls:Pivot Name="photoPivot" Loaded="photoPivot_Loaded"
ItemsSource="{Binding _photos}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<Grid Height="1" Width="1"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Image VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="{Binding photo_link}" />
</DataTemplate>
</controls:Pivot.ItemTemplate>
<controls:Pivot.ItemContainerStyle>
<Style TargetType="controls:PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</controls:Pivot.ItemContainerStyle>
</controls:Pivot>
I was able to solve this by removing all height/width definitions from the grid in the data template and the LayoutRoot grid.
My ListBox is databound to 2 fields. The first is left aligned which is fine, the problem is with the second one which has to be right aligned. I tried using TextAlignment ="Right" and also HorizontalAlignment="Right", none of them worked.
Here is a sample code:
<ListBox x:Name="_listBox">
<ListBox.DataTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,4,8,0">
<TextBlock Text="{Binding Path=ContainerNumber}" />
<TextBlock TextAlignment="Right" Text="{Binding Path=Content}"/>
</StackPanel>
</DataTemplate>
</ListBox.DataTemplate>
Any ideas?
Add to the StackPanel markup:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="0,4,8,0">
This problem is that the StackPanel isn't using all the width available because it is by default aligned Left horizontally.
EDIT: Alternatively you need to style ListBoxItems:
<ListBox.Resources>
<Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListBox.Resources>
Hope this helps.
I'm hoping to create a control that I call an "AutoCompleteListBox". If you've ever used hotmail to send an e-mail the way the to: address line works is what I wish to create. You have what looks like an input box and as you type you get a dropdown of matching objects. Once you select an object (contact) it is added into the input box as a rectangular object. Multiple objects can be added this way and the input box acts like a wrap panel. You can delete objects by backspacing them or clicking the x button on each.
My approach was to begin by subclassing ItemsControl. I've started to write its control template which is basically a wrap panel that I want to show the bound items + a text box. I don't know how to get both the bound items and the textbox to be in the same wrap panel. Here's what I have:
<Style TargetType="ctrl:AutoCompleteListBox">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ctrl:AutoCompleteListBox">
<ScrollViewer x:Name="RootScrollViewer" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Padding="0" Background="{TemplateBinding Background}">
<toolkit:WrapPanel IsItemsHost="True">
<!--Items Bound To ItemSource Go Here-->
<TextBox x:Name="txtInput"/>
</toolkit:WrapPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I don't know how to express what I want. I know you can use an "ItemsPresenter" in the control template which does show the bound items but then how can I add my textbox into the same panel as the bound items?
I'd greatly appreciate any help. Is this the right way to even go about it? Thanks very much.
Subclassing the items control is a good start, but I think the controltemplate should be setup a bit different. The Silverlight toolkit contains an excellent autocomplete box that you can use for this exact purpose. Combine this with a separate items control and you should have something that can be styled to look exactly like the live mail "To" field.
<ControlTemplate>
<toolkit:WrapPanel>
<ItemsControl ItemsSource="{TemplateBinding Items}">
<ItemsControl.ItemsPanel>
<StackPanel Orientation="Horizontal"/>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<!-- Add data template for the previously added items here -->
</ItemsControl.ItemTemplate>
</ItemsControl>
<toolkit:AutoCompleteBox ItemsSource="{TemplateBinding AutoCompleteItems}" />
</toolkit:WrapPanel>
</ControlTemplate>