I want to write a custom control that's used like this:
<HorizontalTick>Some string</HorizontalTick>
It should render like this:
-- Some string -------------------------------------------
Here's my code:
<UserControl x:Class="WeatherDownloadDisplay.View.HorizontalTick"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" d:DesignWidth="348"
Name="controlRoot">
<DockPanel LastChildFill="True">
<UserControl VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" Width="10"/>
<Label Content="???" />
<UserControl VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1"/>
</DockPanel>
</UserControl>
It works except for the label binding. Can someone help me fill in the question marks? I thought about using a ContentPresenter but it seems like an inline binding would be best.
-Neal
The binding would be:
<Label Content="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Content}" />
However, reconsider using a ContentPresenter to be able to show any content directly rather than adding a label that will use its own ContentPresenter to show it.
That being said, you could also replace your whole control by a simple ContentControl with a ContentTemplate showing the lines and the inner content.
Related
I've got a mockup with a screen I don't know how to implement properly:
I'm wondering how to position that Login button (and the "sign in with" block). Without "Login", it would be quite easy with a StackLayout. But this makes it less easy and I'm searching for a simple solution.
I presume it's feasible with an AbsoluteLayout with position calculations in the codebehind, but that makes the whole page more complicated than it looks.
The white block is a Frame that's used everywhere in the app. It's not specific to the login page, so I want to reuse it elsewhere.
How would you do that?
I think you can use a Grid... with 3 rows.
Rows 1 and 2 have the same height.
"Login data" (User/pwd...) occupy row 0 and 1
Button occupy row 2 and 2
For Example
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="fev_ventilazione_smartwatch.Pages.MyPageTest">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label Text="TEXT" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="3" BackgroundColor="Aqua"/>
<Button Text="BUTTON" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" BackgroundColor="Fuchsia"/>
</Grid>
</ContentPage.Content>
</ContentPage>
Produce
I presume it's feasible with an AbsoluteLayout with position
calculations in the codebehind, but that makes the whole page more
complicated than it looks.
Yes you are right. It is feasible with AbsoluteLayout. But its not as complicated as it seems.
Construct your basic elements first:
White container/StackLayout for login details
Login Button.
Facebook/Google buttons in a horizontal StackLayout.
"OR" Label
"Create An Account" Button
Put them in AbsoluteLayout and define their AbsoluteLayout.LayoutFlags as well as AbsoluteLayout.LayoutBounds.
Now key here is to understand that how Absolute Layout works?
You can find that out from this page: Absolute Layout
I have wrote some code to achieve something similar below. But make sure you learn it fully and understand everything before you can use it in your app:
<ContentPage.Content>
<ScrollView BackgroundColor="Silver">
<AbsoluteLayout Margin="30" >
<StackLayout BackgroundColor="White" HeightRequest="150" Spacing="20" Padding="10" VerticalOptions="FillAndExpand"
AbsoluteLayout.LayoutBounds="0,0,1,250" AbsoluteLayout.LayoutFlags="XProportional,YProportional,WidthProportional"
>
<Entry Text="Login" HeightRequest="30"/>
<Entry Text="Password" HeightRequest="30" IsPassword="true" />
<Label Text="FORGOT YOUR PASSOWORD?" HorizontalTextAlignment="End"/>
</StackLayout>
<Button
Text="LOGIN"
FontAttributes="Bold"
BackgroundColor="Maroon"
TextColor="White"
HeightRequest="70"
WidthRequest="70"
AbsoluteLayout.LayoutBounds=".5,215,70,70" AbsoluteLayout.LayoutFlags="XProportional" BorderRadius="35"
/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="EndAndExpand"
AbsoluteLayout.LayoutBounds="1,270,0.5,70" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional"
>
<Button Text="Facebook"/>
<Button Text="Google"/>
</StackLayout>
<Label Text="OR" HorizontalTextAlignment="Center"
AbsoluteLayout.LayoutBounds="0.5,350,50,50"
AbsoluteLayout.LayoutFlags="XProportional"
/>
<Button
Text="CREATE AN ACCOUNT" Margin="15"
BackgroundColor="White" TextColor="Maroon"
BorderColor="Maroon" BorderWidth="1"
BorderRadius="0"
HorizontalOptions="FillAndExpand"
AbsoluteLayout.LayoutBounds="0.5,370,1,150"
AbsoluteLayout.LayoutFlags="XProportional,WidthProportional"
/>
</AbsoluteLayout>
</ScrollView>
</ContentPage.Content>
And here is the result:
NOTE: You can achieve the same look using RelativeLayout as well.
Hope this helps.
I have a UWP application, I have added a button but when I debug the application, I can't see the button. If I add a texblock or textBox I can see them, but not the button.
I have set IsEnabled to true and visibility to visible but I am not able to solve the problem.
Also I have tried to click in the place where it should be the button but nothing happens.
This happens when I debug in local machine and when I debug in a emulator of windows phone 10.
Thank you so much.
EDIT: the axml code
<Page
x:Class="SqliteEF7UWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SqliteEF7UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Transparent">
<Button x:Name="GetVideos" IsEnabled="True" Visibility="Visible" Background="Aquamarine" Content="Buscar Videos" HorizontalAlignment="Left" Margin="120,98,0,510" VerticalAlignment="Stretch" Click="button_Click"/>
<TextBlock x:Name="textBlock" Foreground="BlueViolet" HorizontalAlignment="Left" Margin="101,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="34" Width="132"/>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Margin="213,59,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
</Grid>
</Page>
The margin you set for the Button is too aggressive. The object is now "squeezed". For example set Margin to "120,98,0,200" (or simply "120,98") instead of "120,98,0,510" and it should be visible.
BTW using hardcoded margins to setup the user interface is probably not a good idea. Use for example the Grid with columns and rows instead of margins.
I am creating an universal application using Visual Studio Ultimate 2013 Version 12.0.30501.00 Update 2. I am getting Catastrophic failure on adding Map Control in my xaml like this
<Maps:MapControl Visibility="Collapsed"/>.
I have added
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
in the page header and added 'location' capability to application manifest file.
Has anyone faced the same issue?
You can test his by creating a sample application and add only MapControl. Please help me to resolve this issue.
The problem is observed in normal Windows Phone 8.1 applications also. Am i missing something here?
The problem is observed when i try to run the application in emulator.
The error does not show any other information just 'catastropic failure', nothing else.
May be i will try to re-install Visual Studio. But one more interesting fact is that i could get it working if i am not hiding the map control in the page.
Can you test it by creating a sample application and just making the map control Visibility='Collapsed'?
<Page
x:Class="TestMaps.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestMaps"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Maps:MapControl Visibility="Collapsed" />
</Grid>
</Page>
And the problem is observed in more than one PC.
I've tested your example and indeed there is such a problem also on my Phone.
As I have checked it is possible to set Collapsed from code - so as a workaround:
<Grid>
<Maps:MapControl Name="myMap" Visibility="Visible" />
</Grid>
In the code behind:
public MainPage()
{
this.InitializeComponent();
this.Loaded += (sender, e) => myMap.Visibility = Visibility.Collapsed;
}
I've come up with a workaround for this. Instead of using visibility you can use the maps height/width properties to hide/show the map. Set them to 0 when you want to hide it, and set it to the parents width/height when you want to show it. Here is a code sample:
<Page
x:Class="WP81App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WP81App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Maps:MapControl Name="MyMap" Height="0" Width="0" />
<Button Content="Show Map" Click="ShowMapBtn_Clicked" HorizontalAlignment="Center"/>
</Grid>
</Page>
Button Handler:
private void ShowMapBtn_Clicked(object sender, RoutedEventArgs e)
{
var mapContainer = MyMap.Parent as FrameworkElement;
MyMap.Width = mapContainer.ActualWidth;
MyMap.Height = mapContainer.ActualHeight;
//Hide the button
(sender as Button).Visibility = Visibility.Collapsed;
}
I have the following problem. I keep getting 'ToolTip' cannot have a logical or visual parent error when i try to style tooltip for the toggle button. What went wrong? When i take out the tooltip control under ToggleButton.ToolTip it works !
<ToggleButton x:Name="toggle" OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" Margin="0,4,0,0" VerticalAlignment="Top" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.ToolTip>
<ToolTip Style="{StaticResource tooltipstyle}">
<TextBlock Background="Transparent"/>
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
If you write code like this using property element syntax, you call already the constructor of the ToolTip class.
<ToggleButton.ToolTip>
<TextBlock></TextBlock>
</ToggleButton.ToolTip>
There is no need to instantiate another ToolTip inside like this...
<ToggleButton.ToolTip>
<ToolTip Style="{StaticResource tooltipstyle}">
<TextBlock Background="Transparent"/>
</ToolTip>
</ToggleButton.ToolTip>
Besides, on my system (using .NET 4.5) there is no error.
It seems that WPF can handle both versions meanwhile as intended by the developer.
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>