I want to include an image directly into a ComboBox template.
I found this part of the code and I believe it is here where I would put it:
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" FontWeight="Normal" FlowDirection="{TemplateBinding FlowDirection}" FontSize="{ThemeResource ContentControlFontSize}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" MinHeight="{ThemeResource ComboBoxItemMinHeightThemeSize}" Padding="6.5,0,0,0" Grid.Row="1">
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
</ContentPresenter>
</Button>
I can't put an Image inside contentPresenter because it says I can only set 'Content' once.
If I make something like:
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
<Image Source="ms-appx:///Assets/Arrow.png" />
</StackPanel>
</ContentPresenter>
It actually works but I get an error in my XAML view page: "No installed components were detected. Cannot resolve TargetName PlaceholderTextlock.". And also the image disappears after I select an item.
I'd appreciate some guidance.
I believe you want to set the items inside the combo box to have the image with the textblock. In that case you need to set the ItemTemplate of the combobox like this
<ComboBox Name="hik" ItemTemplate="{StaticResource cmbx}">
And in your page resources you can define the item template for combo box items like this
<DataTemplate x:Key="cmbx">
<StackPanel Orientation="Horizontal" Background="Aqua">
<TextBlock HorizontalAlignment="Left" Margin="0,0,0,0" Foreground="Black" TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Top"/>
<Image Source="/Assets/1.png" Stretch="Uniform" Height="100" Width="100" />
</StackPanel>
</DataTemplate>
Once that is done when you run it on clicking the combobox you can see the list with image
Hope this helps!
Related
I am working on a UWP app and I have implemented a UserControl.The user control has multiple Textboxes and the usercontrol has been implemented in a different view page. I want to make sure that whenever the View page loads, all the textboxes have Enteras the default text that goes off when the textbox is highlighted.
My UserControl has this implementation
<UserControl >
---------------------------
----------------------------
<Border Grid.Row="1" Grid.Column="2" BorderBrush="{StaticResource brush}" BorderThickness="0,3,0,0" >
<local:NumericTextBox x:Name="TaxifuelRevised" IsEnabled="{Binding FuelPlanInfo.IsTappable}" Tag="TaxiFuelActual" TextAlignment="Right" Text="{Binding FuelPlanInfo.TaxiFuelActualInPreferredUnit,ElementName=rootFuelControl,Mode=TwoWay,UpdateSourceTrigger=Explicit}"
Margin="0,0,40,0" Style="{StaticResource TransparentTextBox}" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="#FF0078D7"
BorderBrush="{x:Null}" Background="{x:Null}" FontSize="40" FontFamily="Helvetica" InputScope="Number"
KeyDown="TextBox_KeyDown" MaxLength="5" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" Tapped="KeyBoardInputScope_Tapped" />
</Border>
</UserControl>
The view where it has been implemented is
<Pivot x:Name="MyPivot" Grid.Row="1" ManipulationMode="None" Margin="115,10,90,20" SelectionChanged="MyPivot_SelectionChanged" HorizontalAlignment="Stretch" Width="2536" >
<PivotItem Tag="Fuel Plan" Margin="0" ManipulationMode="None">
<PivotItem.Header >
<StackPanel >
<Image Name="FuelPlanImage" Source="ms-appx:///Assets/fuel_plan_icon.png" Width="82" Height="80"></Image>
<TextBlock Margin="0,8,0,0" TextAlignment="Center" Text="Fuel Plan" FontSize="40"/>
</StackPanel>
</PivotItem.Header>
<local:FuelPlan x:Name="FuelPlanUC" HorizontalAlignment="Stretch" FuelPlanInfo="{x:Bind ViewModel.FuelPlanInfo, Mode=OneWay}"></local:FuelPlan>
</PivotItem>
Checkout the PlaceholderText property of the TextBoxControl.
In my Windows Phone 8 application, i am using one usercontrol to display in all pages.
UserControl XAML code:
<Canvas x:Name="ExpiryPopUp_Container" Margin="0,0,0,0" Background="Transparent" Width="Auto" Height="Auto">
<Border x:Name="Delete" Background="#FFFFFFFF" CornerRadius="10,10,10,10" BorderBrush="#8ca5b9" BorderThickness="2" Height="180" Canvas.Left="58" Canvas.Top="320" Grid.Row="1" Width="360">
<Canvas>
<Border Background="{StaticResource LeftNavBackground}" Height="50" CornerRadius="10,10,0,0" Width="356">
<TextBlock FontSize="26" TextAlignment="Center" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Text="Alert" Width="356" Canvas.Top="10" Height="28"/>
</Border>
<TextBlock Text="Oops! Something went wrong with network connection" TextWrapping="Wrap" FontSize="22" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" TextAlignment="Center" Foreground="{StaticResource BlueText}" Canvas.Top="62" Width="356"/>
<Border x:Name="BorderOk" Background="{StaticResource buttonBackground}" Height="40" Width="98" Canvas.Left="132" Canvas.Top="125" Tap="BorderOk_Tap_1">
<TextBlock TextAlignment="Center" Text="Ok" FontSize="26" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Canvas.Top="14" Margin="10,5,10,2"/>
</Border>
</Canvas>
</Border>
</Canvas>
For Border with name BorderOk has Tap event. I am using this usercontrol throughout my application,almost in all pages. Once user tap on the border it will navigate to MainPage.xaml, but my problem is in some pages i want it to not navigate (means the functionality of tap event to be changed). So can i achieve this by using same usercontrol?If so, how to do it?
One thing you can do is adding a parameter to your user control, for example "shouldNavigate" and set it everytime you use it(or have a default value of true and change it to false in your special situation). Use the value of this parameter in Tap event.
It's been discussed a number of times on SO, check it out: How to read a passed parameter in a WPF UserControl?
I develop Win8.1 universal app.
I'm using GridView with WrapGrid as ItemsPanel inside. Verticall scrolling is disabled, user needs to scroll horizontally only. I'm using incremental source collection as ItemsSource and when user scrolls right to the end of the GridView, new items are dynamically added. Everything works fine, except one thing. I want to make a progress indicator right-aligned and it must become visible when new page is loading. I try to set footer template for grid view, but it is hidden (bc maybe by default footer is added below the itemspanel or whatever).
Here is the code i use to define control template for GridView and put Footer right.
<GridView.Template>
<ControlTemplate TargetType="GridView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ScrollViewer x:Name="ScrollViewer"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<StackPanel Orientation="Horizontal">
<ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}"
Header="{TemplateBinding Header}"
HeaderTransitions="{TemplateBinding HeaderTransitions}"
Padding="{TemplateBinding Padding}"/>
<ContentControl Transitions="{TemplateBinding FooterTransitions}"
ContentTemplate="{TemplateBinding FooterTemplate}"
Content="{TemplateBinding Footer}"/>
</StackPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</GridView.Template>
Then i set ProgressRing as footer template.
<GridView.FooterTemplate>
<DataTemplate>
<ProgressRing VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
IsActive="{Binding IsBusy}"
Margin="0,24"
Width="50"
Height="50"
Foreground="{StaticResource LightGreyBorderBrush}"
Style="{StaticResource ProgressRingStyle}" />
</DataTemplate>
</GridView.FooterTemplate>
But when i try to scroll - the things are going crazy. GridView always calls next page loading one after another, but the scroll position is nearly 0 (in the beginning of the GridView). So i get the infinite page loading.
Can anyone help me with this? Many thanks in advance!
EDIT: I've created a small sample to reproduce. Please take a look. Here is the link.
Right aligned FooterTemplate is supported out of the box. Just use ItemsWrapGrid (it's used in GridView by default) instead of WrapGrid as ItemsPanel. You also don't need to redefine Template. Here is working code from your example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="TestGridView">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemHeight="100"
Orientation="Vertical"
MaximumRowsOrColumns="5" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Border Background="DarkSlateGray"
Height="100"
Width="100"
Margin="20">
<TextBlock Foreground="#FFFFFF"
Text="{Binding Number}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.FooterTemplate>
<DataTemplate>
<ProgressRing IsActive="True"
Margin="0,24"
Width="50"
Height="50" />
</DataTemplate>
</GridView.FooterTemplate>
</GridView>
</Grid>
Please note that 2 pages are loaded each time you scroll to the right as GridView thinks one page is not enough.
Hope this helps.
The xaml code for the radio button is,
<RadioButton x:Name="RadioButton1" BorderBrush="#b2b2b2" IsChecked="true" Foreground="Black" BorderThickness="0.5" Background="White" Content="Taxable" HorizontalAlignment="Left" Height="78" Margin="0,0,0,0" Width="164"/>
But there is no change in the border thickness, what ever the value i give.
How can this problem be solved, i just want to change the borderthickness of the radio button(FYI - Borderbrush works fine).
You're going to need to retemplate the RadioButton if you want to change that.
The default template has the background circle defined like this:
<Ellipse x:Name="CheckBackground" Fill="{TemplateBinding Background}"
HorizontalAlignment="Left" Height="25.5" IsHitTestVisible="False"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{ThemeResource PhoneStrokeThickness}"
VerticalAlignment="Center" Width="25.5"/>
Notice that the StrokeThickness property is set to a ThemeResource, not to a TemplateBinding the way Stroke is.
Try this
<Border BorderBrush="#b2b2b2" BorderThickness="10.0" Width="164">
<RadioButton x:Name="RadioButton1" IsChecked="true" Foreground="Black" Content="Taxable" HorizontalAlignment="Left" Height="78" Margin="0,0,0,0" Width="164"/>
</Border>
I have ListBox in my WPF project that gets set to a datasource of "MyObjectCollection".
I have managed to get the ListBox to display my collection, and each item to display two string properties from the object. The object also contains an Image, how do i get the image to display in the ListBox?
I am currently using the below code to bind to my DataSource
<UserControl.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="silver" CornerRadius="5" Padding="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid>
<Image Source="{Binding Artwork}" Tag="{Binding Artwork}" VerticalAlignment="Stretch" ></Image>
<TextBlock Text="{Binding Name}" Foreground="#515151"
FontSize="16" HorizontalAlignment="Stretch"
FontWeight="Bold" />
<TextBlock Text="{Binding Length}" Foreground="#515151" Margin="0,25,0,0"
FontSize="10" HorizontalAlignment="Stretch"
FontWeight="Bold" />
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
Thanks,
Ben
It depends on the image type in your collection.
If it is a path string to a file or if it is a byte array.
You should use ValueConverter for your image binding.
Take a look at ValueConverter