É facilmente possível especificar uma margem e / ou preenchimento para linhas ou colunas em uma Grade WPF?
É claro que eu poderia adicionar colunas extras para separar as coisas, mas isso parece ser um trabalho para preenchimento / margens (ele fornecerá XAML muito mais simples). Alguém derivou da grade padrão para adicionar essa funcionalidade?
Respostas:
Você pode escrever sua própria
GridWithMargin
classe, herdadaGrid
e substituir oArrangeOverride
método para aplicar as margensfonte
RowDefinition
eColumnDefinition
são do tipoContentElement
eMargin
são estritamente umaFrameworkElement
propriedade. Portanto, para sua pergunta "é facilmente possível", a resposta é um não definitivo. E não, eu não vi nenhum painel de layout que demonstre esse tipo de funcionalidade.Você pode adicionar linhas ou colunas extras, conforme sugerido. Mas você também pode definir margens em um
Grid
elemento em si, ou em qualquer coisa que contenha umGrid
, portanto essa é sua melhor solução por enquanto.fonte
Use um
Border
controle fora do controle da célula e defina o preenchimento para isso:Fonte:
fonte
Você poderia usar algo como isto:
Ou se você não precisar do TemplateBindings:
fonte
Pensei em adicionar minha própria solução porque ninguém ainda mencionou isso. Em vez de criar um UserControl baseado em Grid, você pode direcionar os controles contidos na grade com uma declaração de estilo. É necessário adicionar preenchimento / margem a todos os elementos sem precisar definir para cada um deles, o que é complicado e exige muito trabalho.
O que é como o equivalente a "preenchimento de célula".
fonte
Margin
propriedade, é que qualquerStyle
um em aResourceDictionary
se aplicará a todos os elementos emTargetType
qualquer lugar dentro de todo o escopo do elemento proprietário desse dicionário. Então é issoStyle
que escorre, não a propriedade.Isso não é terrivelmente difícil. Não posso dizer o quão difícil foi em 2009 quando a pergunta foi feita, mas foi então.
Observe que, se você definir explicitamente uma margem diretamente em um filho da grade ao usar esta solução, essa margem aparecerá no designer, mas não no tempo de execução.
Essa propriedade pode ser aplicada a Grid, StackPanel, WrapPanel, UniformGrid ou qualquer outro descendente do Panel. Afeta crianças imediatas. Presume-se que as crianças desejem gerenciar o layout de seu próprio conteúdo.
PanelExt.cs
Demo:
MainWindow.xaml
MainWindow.xaml.cs
fonte
build
ourun
antes que a visualização ao vivo possa ser exibida? Bom e simples. 1 para cima.Encontrei este problema ao desenvolver algum software recentemente e me ocorreu perguntar POR QUE? Por que eles fizeram isso ... a resposta estava bem na minha frente. Uma linha de dados é um objeto; portanto, se mantivermos a orientação do objeto, o design de uma linha específica deve ser separado (suponha que você precise reutilizar a exibição da linha posteriormente no futuro). Então comecei a usar painéis de pilha de banco de dados e controles personalizados para a maioria das exibições de dados. As listas apareceram ocasionalmente, mas principalmente a grade foi usada apenas para a organização da página principal (cabeçalho, área de menus, área de conteúdo e outras áreas). Seus objetos personalizados podem gerenciar facilmente quaisquer requisitos de espaçamento para cada linha no painel ou grade da pilha (uma única célula da grade pode conter o objeto inteiro da linha. Isso também tem o benefício adicional de reagir adequadamente a alterações na orientação,
ou
Seus controles personalizados também herdarão o DataContext se você estiver usando ligação de dados ... meu benefício favorito pessoal dessa abordagem.
fonte
ListView
controle WPF noGridView
modo, mas sem nenhuma provisão para fazer com que todos os “RowObjects” compartilhem a mesma largura de coluna. Na realidade, ele não tem mais muito a ver com uma grade.no uwp (versão Windows10FallCreatorsUpdate e superior)
fonte
Xamarin.Forms
.Editado:
Para dar margem a qualquer controle, você pode envolver o controle com uma borda como esta
fonte
Eu fiz isso agora com uma das minhas grades.
fonte
Uma possibilidade seria adicionar linhas e colunas de largura fixa para atuar como o preenchimento / margem que você está procurando.
Você também pode considerar que está limitado pelo tamanho do seu contêiner e que uma grade se tornará tão grande quanto o elemento que contém ou sua largura e altura especificadas. Você pode simplesmente usar colunas e linhas sem largura ou altura definidas. Dessa forma, eles padronizam a divisão uniforme do espaço total na grade. Então seria apenas uma questão de centralizar seus elementos vertical e horizontalmente dentro de sua grade.
Outro método pode ser agrupar todos os elementos da grade em uma grade fixa com uma única linha e coluna que tenha tamanho e margem fixos. Que sua grade contém caixas fixas de largura / altura que contêm seus elementos reais.
fonte
Recentemente, tive um problema semelhante na grade de duas colunas, precisava de uma margem apenas nos elementos da coluna da direita. Todos os elementos nas duas colunas eram do tipo TextBlock.
fonte
Embora você não possa adicionar margem ou preenchimento a uma Grade, você pode usar algo como um Quadro (ou contêiner semelhante), ao qual pode aplicá-lo.
Dessa forma (se você mostrar ou ocultar o controle em um botão, clique em dizer), não será necessário adicionar margem a todos os controles que possam interagir com ele.
Pense nisso como isolando os grupos de controles em unidades e aplicando estilo a essas unidades.
fonte
Como foi dito antes, crie uma classe GridWithMargins. Aqui está o meu exemplo de código de trabalho
Uso:
fonte
Estou surpreso por ainda não ver esta solução publicada.
Vindo da web, estruturas como o bootstrap usarão uma margem negativa para retirar linhas / colunas.
Pode ser um pouco detalhado (embora não tão ruim), funciona e os elementos são espaçados e dimensionados de maneira uniforme.
No exemplo abaixo, uso uma
StackPanel
raiz para demonstrar como os três botões são espaçados igualmente usando margens. Você pode usar outros elementos, basta alterar o botão interno x: Type from para o seu elemento.A idéia é simples: use uma grade do lado de fora para puxar as margens dos elementos para fora de seus limites pela metade da quantidade da grade interna (usando margens negativas), use a grade interna para espaçar uniformemente os elementos com a quantidade desejada.
Atualização: alguns comentários de um usuário disseram que não funciona. Aqui está um vídeo rápido demonstrando: https://youtu.be/rPx2OdtSOYI
fonte
Às vezes, o método simples é o melhor. Basta preencher suas cordas com espaços. Se são apenas algumas caixas de texto, etc, este é de longe o método mais simples.
Você também pode simplesmente inserir colunas / linhas em branco com um tamanho fixo. Extremamente simples e você pode alterá-lo facilmente.
fonte