i am trying to do some people administration application and i would like to use own component. I have a listBox with actions and i would like to show people who are in list in selected action. There is no problem for me to show just their names in another list, but i would like to have a pane where would be a card (my component) for every person asociated with that action. That card should look like
<WrapPanel HorizontalAlignment="Left" Height="296" Margin="668,59,0,0" VerticalAlignment="Top" Width="230">
<Image x:Name="image" Height="124" Width="226"/>
<TextBlock x:Name="textBlock_Copy5" TextWrapping="Wrap" Text="Name: " FontSize="18"/>
<TextBox x:Name="textBox_Copy2" Height="25" TextWrapping="Wrap" Width="151"/>
<TextBlock x:Name="textBlock_Copy6" TextWrapping="Wrap" Text="Surname: " FontSize="18"/>
<TextBox x:Name="textBox_Copy3" Height="25" TextWrapping="Wrap" Width="145"/>
<TextBlock x:Name="textBlock_Copy7" TextWrapping="Wrap" Text="Birthday: " FontSize="18"/>
<DatePicker Width="136" DisplayDate="2016-06-27" DisplayDateStart="1950-01-01" FirstDayOfWeek="Monday" SelectedDate="{Binding Selected.DatumOdjezdu}"/>
</WrapPanel>
So there are two problems for me.
How to create own component.
How to create a pane(it can be scrollable), where would be as many those cards as needed.
Thanks for any hint.
WPF offers more than one way to achieve your goal.
It depends on your Application, what fits your needs the most.
You can reach this by
DataTemplates
UserControl
CustomControl
Here some more Info about the Differences of UserControl and CustomControl
Depending on your posted Code, i'd suggest a DataTemplate in your case.
Related
I have defined a "Toggle" textblock inside three buttons. I am getting an error that the name "Toggle" Is already defined in the innermost scope of the second and third buttons.
Shouldn't they not be defined in the same scope? It seems they are...
If this is not the way to do it, how can one simply define similar items (Similar to how there can be an id property in css) so one can access the inside of each button via one same identifier in the code behind?
<Button Name="OutputButton" Margin="5" Width="150" Click="OutputToggle_Click" TabIndex="0" HorizontalAlignment="Center">
<TextBlock Name="OutputText" HorizontalAlignment="Center">RF
<TextBlock Name="Toggle" HorizontalAlignment="Left"></TextBlock>
</TextBlock>
</Button>
<Button Name="ModulationButton" Margin="5" Width="Auto" HorizontalAlignment="Left" Click="ModulationToggle_Click" IsEnabled="False" TabIndex="0">
<TextBlock Name="ModulationToggleText" Margin="3">Load Waveform to enable MOD
<TextBlock Name="Toggle"></TextBlock>
</TextBlock>
</Button>
<Button Name="LOSharingButton" Margin="5" Width="150" HorizontalAlignment="Left" Click="AutomaticLOSharingButton_Click">
<TextBlock Name="LOSharingText">LO Sharing
<TextBlock Name="Toggle"></TextBlock>
</TextBlock>
</Button>
The answer to this is to use the tag property of a textblock. This is very similar to the id property in css, but takes a little more effort to find.
Porting an iOS app and I may be abusing the hub control; but I have a very simple app where I'd like a form to be in a hub section. However it seems like it must be wrapped in a DataTemplate and once it is the form's TextBox controls do not show up in the code behind C# file?
<HubSection x:Uid="HubSection1" Header="SETTINGS"
DataContext="{Binding Groups[2]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<StackPanel VerticalAlignment="Top" Margin="0,0,20,0">
<TextBlock Text="api base uri" FontSize="21" TextWrapping="NoWrap"/>
<TextBox Name="apiBaseUriTextBox" Margin="0,0,0,10" TextWrapping="Wrap" PlaceholderText="api base uri" VerticalAlignment="Stretch"/>
<TextBlock Text="api key" FontSize="21" TextWrapping="NoWrap" Margin="0,0,0,10"/>
<TextBox Name="apiKeyTextBox" Margin="0,0,0,10" TextWrapping="Wrap" PlaceholderText="api key" VerticalAlignment="Stretch"/>
<TextBlock Text="api secret" FontSize="21" TextWrapping="NoWrap"/>
<TextBox Name="apiSecretTextBox" Margin="0,0,0,10" TextWrapping="Wrap" PlaceholderText="api secret" VerticalAlignment="Stretch"/>
<Button Click="SettingsSaveClickHandler"
Content="Save" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,20,0,0"/>
</StackPanel>
</DataTemplate>
</HubSection>
If you want to put the form directly in the HubSection's DataTemplate then the best way to access the values is by data binding the TextBoxes to properties in your DataContext. The other option would be to crawl the visual tree by calling the VisualTreeHelper from your button's SettingsSaveClickHandler
Another option would be to create your form as a UserControl and then host the completed form in the HubSection's DataTemplate. Again, you can bind it to the DataContext to connect to the underlying data.
this is a rather simple question and its technically not that big of a deal but my OCD is tingling when i see this.
I have designed a basic WPF application and i cannot figure out why exactly the button and the textboxs are not alligning correctly as can be seen in this image(bottom right side):
This is the code responsible for it:
<Grid Margin="283,365.288,18,10" Grid.ColumnSpan="2">
<Label Content="GUID" HorizontalAlignment="Left" Margin="0,0.998,0,0" VerticalAlignment="Top" Height="22.96"/>
<Label Content="UniqueID" HorizontalAlignment="Left" Margin="0,22.68,0,0" VerticalAlignment="Top" Height="25.516" Width="63.297"/>
<Label Content="Akt/GZ" HorizontalAlignment="Left" Margin="0,48.196,0,0" VerticalAlignment="Top" Height="25.516" Width="63.297"/>
<TextBox HorizontalAlignment="Left" Height="23.958" Margin="63.297,0,0,49.754" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="125"/>
<TextBox HorizontalAlignment="Left" Height="23.958" Margin="63.297,0,0,25.796" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="125"/>
<TextBox HorizontalAlignment="Left" Height="23.958" Margin="63.297,0,0,1.558" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="125"/>
<Button Content="Search" HorizontalAlignment="Left" Margin="193.297,0.998,0,0" VerticalAlignment="Top" Width="60.703" Height="22.96"/>
<Button Content="Search" HorizontalAlignment="Left" Margin="193.297,25.236,0,0" VerticalAlignment="Top" Width="60.703" Height="22.96"/>
<Button Content="Search" HorizontalAlignment="Left" Margin="193.297,49.194,0,0" VerticalAlignment="Top" Width="60.703" Height="22.96"/>
<CheckBox Content="07" HorizontalAlignment="Left" Margin="259,5.498,0,0" VerticalAlignment="Top"/>
<CheckBox Content="10" HorizontalAlignment="Left" Margin="296.915,5.498,0,0" VerticalAlignment="Top"/>
<CheckBox Content="07" HorizontalAlignment="Left" Margin="259,29.736,0,0" VerticalAlignment="Top"/>
<CheckBox Content="10" HorizontalAlignment="Left" Margin="296.915,29.736,0,0" VerticalAlignment="Top"/>
<CheckBox Content="07" HorizontalAlignment="Left" Margin="259,53.694,0,0" VerticalAlignment="Top"/>
<CheckBox Content="10" HorizontalAlignment="Left" Margin="296.915,53.694,0,0" VerticalAlignment="Top"/>
</Grid>
Either way I am not quite sure what causes it to... drift away for a bit. Also (in case someone asks) I am not sure why i used a Grid to group these objects, I googled on object groupings in WPF and i found some answers but the Grid and the Stackpanel seemed like the easiest to use, but the Stackpanel gave me even bigger headaches when aligning the content properly.
If you have some criticism regarding the imlpementation please feel free to do so, I have already ordered some books regardnig WPF design but I am more than happy and willing to listen to experienced devs and learn.
I apologize for the "noobish" question but I have spent the last 2 days fiddling around with the settings to no avail and wouldn't have come here and asked otherwise.
Thank you
You are using the Grid layout in the wrong way.
Using Margin in Grid is not recommended, for many reasons (Performance, Stretching problems and so on)
The Grid layout allows you to set Rows and Columns and order your controls in a table.
You can read more about it here
http://www.wpftutorial.net/GridLayout.html
You first have to declare your rows and cols using ColumnDefinitions and RowDefinitions and then apply each control to it's row and column using the attribute Grid.Row and Grid.Column
reading the link I've attached will explain things better
Hello and thanks for the help. I have a Treeview that I am populating with a Hierarchical data template, and currently the bottom nodes have a tooltip that generates a small stack panel that is populated with data specific to the item the mouse hovers over. I also have a button sitting in the tooltip, however, as the tooltip does not persist when the mouse moves over it, I am unable to make use of the button like I need to. My xaml looks like this:
<!--=========================== Hierarchical Data template for tree view -->
<!--template for bottom nodes-->
<sdk:HierarchicalDataTemplate x:Key="ModTemplate" ItemsSource="{Binding ApplicationModules}">
<StackPanel Orientation="Horizontal" > <!--======tooltip style to handle format for callout window============-->
<ToolTipService.ToolTip>
<ToolTip HorizontalOffset="0" VerticalOffset="0" Style="{StaticResource ModuleToolTipStyle}">
<StackPanel Width="150" Height="auto" >
<TextBlock Text="Module Info" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock Text="Module State:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleState}" />
<TextBlock Text="Module Start Time:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleStartTime}"/>
<TextBlock Text="Module Down Time:" FontWeight="Bold"/>
<TextBlock Text="{Binding Path=ModInfo.ModuleDownTime}" />
<Button Content="More Info" Width="75"></Button>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
<!--============end tooltip style for callout window===================-->
<ContentPresenter Margin="0 0 4 0" Content="{Binding Icon}" />
<TextBlock FontStyle="Italic" Text="{Binding Path=ModuleName}" />
</StackPanel>
</sdk:HierarchicalDataTemplate>
I would like the tooltip to persist when the mouse moves over it so that I can wire an event to the button. How can I achieve this? Thanks again for the help.
You have a couple options to accomplish your goal that I'm aware of. You can go check out the Silverlight Advanced Tooltips project over on codeplex which does what you want (though I personally have not used it so can't give any kind of review.)
Or you can make your own with some creativity. If it were me I would probably skip all that mess, forget the ToolTipService all together and just make my own to dress it up since to a user, what you're providing isn't what they're used to in terms of a tooltip expectation anyway and have cross more over to a callout or popout functionality. I can make an example as soon as I get some freed up time if option #1 doesn't work for you but I hope it does. Essentially both my way, and that project link I provided would do the same thing, which is provide a delay after the MouseLeave event of what it's attached to so the user can get to it before it disappears. Then hand off its visibility condition to that object. Let me know if this doesnt work and I can give you an alternative example using nothing but XAML.
I have a bunch (currently) HyperlinkButtons on my main web page. I want to have 2 versions for the image of each button: selected and unselected. This way when the users enters a page the corresponding button will change to the "selected" image.
Here is an image of what I want to accomplish:
This seems to me like something trivial, but so far I have been running into a stone wall.
I would prefer to do everything from the XAML (but I will be grateful for any solution).
Here is a little of my XAML:
<ScrollViewer x:Name="NavScrollViewer" Margin="-5,12,5,-12" ScrollViewer.VerticalScrollBarVisibility="Visible" IsEnabled="True"
Style="{StaticResource ContentViewerStyle}">
<StackPanel x:Name="ToolboxPanel" Orientation="Vertical" d:LayoutOverrides="Width" Height="Auto">
<HyperlinkButton x:Name="DashboardButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/Dashboard"
Height="50"
/>
<TextBlock Text="Dashboard" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ConfigurationButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/CRSConfiguration"
Height="50"
/>
<TextBlock Text="Configuration" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ScanEnginestionButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/ScanEngines"
Height="50"
/>...
You need to have a toggle button and set its IsChecked property to toggle among its visual states. You may go through this post Using Toggle Button