If I want to create a button control like that, is it supposed to be a User Control or a Custom Control? I am not sure maybe something else? Ideally I want to be able style/animate the main button and the inner button separately; also obviously Ill need to process their events separately. These buttons will be created at run-time and Ill need to set the icons dynamically.
I'd suggest a user control. You can still create your basic styling in xaml and use code for the dynamic stuff.
You'd basically have something like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="" Grid.Column="0" />
<TextBlock Grid.Column="1">Your button text</TextBlock>
<Image Source="" Grid.Column="2"/>
</Grid>
</Button>
Related
How to customize the WindowChrome class while using MvvmCross?
I've got this:
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="{x:Static SystemParameters.CaptionHeight}" ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
</WindowChrome.WindowChrome>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Grid.Column="0"
FontSize="32"
Text="SOME UPPER CASE TEXT THAT WILL NEVER BE DISPLAYED" />
</Grid>
inside my MvxWindow and the WindowStyle is set to none.
The problem is that MvxWindow doesn't seem to display anything. That means I can't create the buttons I need either. I don't know if MvvmCross expects every UI element to be part of a View or what else is going on. Resizing and even right-clicking the invisible border works just fine. Is there any way to do this without having to rebuild the entire WindowChrome functionality inside a View?
I will answer this myself;
while there is little difference in creating a custom WindowChrome with MvvmCross, I'll keep this question up in the hope that it could help someone else.
Not being able to display UI elements in MvxWindow is actually no problem at all. Just create the UI in your View and set the WindowChrome.IsHitTestVisibleInChrome property to true for each element you need.
There is basically no difference between doing this within a Window or a View. You just have to keep an eye on your CaptionHeight as your WindowChrome and your UI are now in two different scripts.
It could look like this:
Inside your MvxWindow:
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="{x:Static SystemParameters.CaptionHeight}" ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
</WindowChrome.WindowChrome>
Inside the view displayed by that window:
<Menu Height="{x:Static SystemParameters.WindowCaptionHeight}">
<MenuItem Header="_Exit" WindowChrome.IsHitTestVisibleInChrome="True" />
</Menu>
My form in wpf has has to look like this:
I need to create a textbox that contains a button and an image. The idea of this is that when I click on the image the text entered is shown as bullets . How can I do this in wpf? I don't know what tools to use.
Think of it as creating a user control and adding a textbox and a button to it, not as adding a button to a textbox (and note you can have the button overlap the textbox to create a similar effect).
If you want to use it at just one place.. you can achieve this like below:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.ColumnSpan="2"/>
<Button Margin="3" Grid.Column="1" Width="30">
<Image Source="myImage.png"/>
</Button>
</Grid>
You can make a borderless TextBox, and a button (with the image) near it, and surround them both with a border, what will give you the look anf funcionality you want.
I am just wondering if it is possible to add hyperlink to WPF window title and if it is possible what is the best way of doing that.
I want to have title like that:
Program name, Version and that link to my site (e.g http://mysite.com)
This isn't supported out-of-the-box.
However, you can use Control Template to achive this or create an entire custom window of your own.
you can create a control template for your window. Something like that :
<Window.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">
<Hyperlink NavigateUri="http://mysite.com">
My Program, version 1
</Hyperlink>
</TextBlock>
<!-- Implement your own control box control -->
<ContentPresenter />
</Grid>
</ControlTemplate>
</Window.Template>
You'll also have to set the window's Style to None as follows:
WindowStyle="None"
This will also mean that you'll have to implement your own controlBox with minimize, maximize and close buttons.
Check out this links for further information:
http://www.codeproject.com/Articles/140267/Create-Custom-Windows-in-WPF-with-Ease
http://blog.magnusmontin.net/2013/03/16/how-to-create-a-custom-window-in-wpf/
Good luck
I'm developing a windows phone 8 app, and I'm having trouble handling events when I tap an item in a longlistselector.
So I have this data template:
<DataTemplate x:Key="InfoDataTemplate">
<Grid Margin="12,0,12,0" Width="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="UserAvatar" Margin="0,12,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Source="{Binding user.avatar_url}" VerticalAlignment="Top"/>
<TextBlock x:Name="Username" Margin="12,0,0,0" Text="{Binding user.username}" Grid.Row="0" Grid.Column="1" FontSize="24" FontWeight="Bold"/>
I put this data template as part of in app.xaml since I reuse this in different pages.
I'm using this data template in a longlistselector in a page(page1.xaml):
<phone:LongListSelector x:Name="UserList" ItemTemplate="{StaticResource InfoDataTemplate}" SelectionChanged="List_SelectionChanged" ItemRealized="List_ItemRealized">
The intended behavior is that when I tap the image in the template I navigate to page A, when I tap anywhere else in the data template I navigate to page B. Is this possible? If so how should I implement it? Thanks
It is possible to implement this behavior.
You need to do the following
Add a tap event for Image, say ImageTapped
Add a tap event for the LonglistSelector ListItemTapped
Now when you click on the image it will call the ImageTapped event first (you need to set a flag here) and then it calls the ListItemTapped event (you can check if the flag is set) and then act upon accordingly. Don't forget to reset the flag in the ListItemTapped event.
What is the name of the control that is highlighted blue?
I want to make this:
(source: deviantart.net)
It would be helpful if you found some link to a library. I've searched using many different names (TaskButton/TaskPanel/StackPanel) but I'm really off.
Thanks.
Please note that the second image is only a concept sketch, and that it's not a real application.
This is most likely a custom (user) control which has been created by composing a number of standard WPF controls. It could easily be constructed in WPF using a horizontal StackPanel with various Image, TextBlock and Button elements as its content
I do not believe that the control you are pointing to is a .NET or WPF control. Most Windows 7 user interface elements are still native C/C++ resources.
That said, it is relatively easy to replicate that behavior using WPF 4.0, through a ListBox with a custom ItemTemplate. Take a look at this question to get you started.
It looks rather like a CommandLink control to me, something that first appeared in Vista. It's never been exposed as a control for use in Windows Forms or WPF, but this question contains information on how to make it available for your own use:
I suppose it is a WPF user control, created specifically for this application. It looks like it consists of a Image, some TextBox controls and a Button which in turn contains an Image.
I don't know how that control is called but my bet it is it's a custom windows form control, here's a link to get you started
I got it. You can do this with the help of a simple button in WPF.
You have to embed another button and those images to that button.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Button Height="38" Margin="12,49,83,0" Name="button1" VerticalAlignment="Top"></Button>
<Grid Height="32" Margin="113,48,80,0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="13*" />
<RowDefinition Height="19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="12*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<Button Margin="0,6,0,0" Name="button2" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="3" Grid.RowSpan="2">Button</Button>
<Button Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="17,6,3,0" Name="button3" Grid.Column="2">Button</Button>
</Grid>
</Grid>
</Window>